标签：百分比 media screen 布局 html 屏幕 完完全全 前端

前端布局方案有以下几种：

• 固定布局
• 百分比布局/流式布局
• 响应式布局
• 弹性布局/flex布局
• Grid布局/二维布局（目前前端布局的发展方向）
• 定位布局
• 浮动布局

固定布局

固定布局是最简单的布局，也是小白上手最快的布局，直接设置宽度值和高度值进行布局，不需要考虑是否跟随屏幕大小变化的布局方案，最能展现出网页设计的原始效果。
布局单位：
一律采用px
优点：
上手快，布局简单，没有任何兼容性问题。
门户网站和企业网站更多会采用这种布局方案，因为他们的设备尺寸一般都是固定的。
缺点：
不会自适应屏幕大小。
高分辨率的设备，固定布局会留下很大的空白，会出现‘黄金比例’，‘三分定律’。综合平衡和其他的设计原则。
屏幕分辨率过小时会出现横向滚动条。
性能消耗： 由于一开始就写了固定宽高，所以是所有布局方案中消耗性能最小的

百分比布局/流式布局

百分比布局顾名思义就是采用数学中的百分比单位进行布局，不受窗口宽度的影响，通过百分比来限定布局元素，还可以根据客户端分辨率大小进行显示。
布局单位： %
优点：
页面布局根据屏幕分辨率进行适配但是整体布局结构不变。
缺点：
窗口比例缩小到百分之五十，布局结构会发生错乱，一般情况会搭配min-*或者max-*使用。
屏幕尺度跨度太大，在相对其原始设计过小或过大的屏幕上会比例失调。
性能消耗：
在所有方案中，我自认为是消耗性能最大的，比响应式布局还要消耗性能，因为每个设备的宽高不一样，浏览器需要进行大量的计算

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，讲的是一个网站可以适用于多个设备，而不是为每个设备都写一套代码，这个概念是为了解决市面上手机移动浏览而诞生的。
布局单位：
媒体查询、rem、vw/vh
优点：
不同分辨率设备灵活变化，能够解决多设备显示适用的问题
缺点：
兼容各种设备工作量大，效率低
一定程度上改变原有的布局结构，用户体验差
这是一种折中的选择方案，多方面导致无法达到页面布局的最佳效果
性能消耗： 相对于百分比来说消耗还算比较小的，但是相当于固定布局消耗还是比较大

媒体查询

//媒体查询必须在head里面添加这一句代码防止屏幕被手动放大和缩小
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; 
maximum-scale=1; user-scalable=no;">

//媒体查询代码一般min是从小到大 1=>10，max是从大到小 10=>1
//因为js代码是至上往下进行执行，如果执行了这句代码，下一句代码执行则会覆盖上一句代码
// @media 查询 必须指定设备 这里指定的是screen screen 屏幕宽度 也有其他属性 max 最大 min 最小
    @media screen and (max-width:320px)  {
    //屏幕视口不大于320触发
        html {
            font-size: 12px;
        }
        body{
            background: #000;
        }
    }
 
    @media screen and (min-width:320px) {
    //屏幕视口不小于320触发
        html {
            font-size: 15px;
        }
        body{
            background: blue;
        }
    }
 
    @media  screen and (min-width:400px)  {
     //屏幕视口不小于400触发
        html {
            font-size: 18px;
        }
        body{
            background: yellow;
        }
    }
 
    @media  screen and (min-width:600px)  {
     //屏幕视口不小于600触发
        html {
            font-size: 24px;
        }
        body{
            background: #ccc;
        }
    }

//媒体查询max查询代码
        @media screen and (min-width:900px) {
        //屏幕宽度不小于900触发
        html {
            font-size: 12px;
        }
        body{
            background: #000;
        }
    }
 
    @media screen and (max-width:900px)  {
     //屏幕宽度不大于900触发
        html {
            font-size: 15px;
        }
        body{
            background: blue;
        }
    }
 
    @media  screen and (max-width:500px)  {
     //屏幕宽度大小于500触发
        html {
            font-size: 18px;
        }
        body{
            background: yellow;
        }
    }
 
    @media  screen and (max-width:400px)  {
        html {
            font-size: 24px;
        }
        body{
            background: #ccc;
        }
    }

rem单位
rem是相对于html根元素的大小，可以采用媒体查询的方式动态设置html根元素大小

vw/vh布局
vw和vh是相对有浏览器可视区域的宽度和高度，跟百分比有些类似，但又不同

响应式布局和百分比布局的区别： 响应式布局可以随着屏幕变化变化为多个布局格式，但是百分比从始到终都是一个模板

弹性布局/flex布局

弹性布局能和其他两种主要布局类型（固定宽度布局和百分比布局）结合使用。flex布局和em都可以叫做弹性布局。flex是css3的一个属性。
附上flex布局详链接：fiex布局点我
布局单位: em
优点：
常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。
如果结合其他布局方式，可以说是完美的，不过需要有一些需要考虑的。
缺点：
兼容性: 浏览器在 ie10 以上的可以考虑，ie10以下会出现兼容性问题，需要做兼容
性能
不怎么消耗性能，因为不需要他去计算，是通过css属性方式进去
em
em单位是相当于父级盒子来说的，因此得不到推广，rem和em相对于百分比来说比较灵活。
国人制作网页习惯用CSS强制定义字体大小，确保到每个设备上的效果一致，采用的都是绝对单位px。要是从网站易用性出发字体大小应该是可变的，一些眼睛视力比较弱的人需要放大字体去查看页面内容。然而现在占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外则非常重视网站的易用性，一部分外国网站已经使用em作为字体单位。

Grid布局/二维布局

Grid(网格)布局是一个二维布局是在基于网络上的布局系统。Flex布局改善了我们的布局方式，但它主要是为了解决一维布局，而不是复杂的二维布局。flex和grid能够协同工作且配合十分的好。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块
采用grid布局的元素，称为grid容器，简称“容器”。其所有直系子元素（直系子元素的子元素不包含在内）自动成为容器成员，被称为grid项目，简称“项目”。
优点：
可以让很多繁琐的布局变得简单，和flex结合使用更佳。
提高网页的规范性和可重用性，将页面模块的尺寸标准化，对于大型网站的开发和维护能大大节约成本。
能让整个网站各个页面的布局保持一致，增加页面的相似度。
缺点：
兼容性是它的一大痛点： 微信浏览器不兼容
性能
消耗性能较小，因为不需要他去计算，是通过css属性方式进去

定位布局

通过css定位属性进行定位，如子绝父相等等

浮动布局

浮动布局会脱离文档流，还需要清除浮动

.father:before,#father:after {
content:".";
display:table;
}
.father:after {
clear:both;
}
.father {
*zoom:1;
}

标签：百分比,media,screen,布局,html,屏幕,完完全全,前端
来源： https://blog.csdn.net/qq_37547964/article/details/111405305

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。