标签：style 简单 gre 响应 方便 屏幕宽度 识别 phone display
静态布局
常见于PC端，一般采用居中布局，以px作为单位给各元素设定固定的width，最外层div采用min-width限定最小宽度，当浏览器窗口小于min-width时会出现滚动条，移动端需要重新建新的页面。
优点：简单且没有兼容性问题
缺点：无法根据用户屏幕大小做出不同处理，目前PC端屏幕跨度较大，美观性较差
例：
<style>
*{
margin:0;
padding:0;
}
.main{
width:1400px;
min-width:1400px;
margin:0 auto;
background:#f1f1f1;
}
section{
background:#D8C1B0;
margin-top:15px;
}
</style>
<div class="main">
<h3>静态布局展示</h3>
<section>
模块一
</section>
<section>
模块二
</section>
</div>
流式布局
宽度用百分比，高度用px控制，配合min、max属性控制，使元素宽度根据用户屏幕大小做出改变同时保持布局不变，如栅栏系统。
优点：保持布局不变的情况下，页面元素宽度会随着屏幕大小变化而变化
缺点：如果屏幕跨度太大会显得不协调
例：
<style>
*{
margin:0;
padding:0;
}
.main{
width:100%;
}
section{
float:left;
width:25%;
}
</style>
<div class="main">
<h3>流式布局展示</h3>
<div>
<section style="background:#D8C1B0;">
模块一
</section>
<section style="background:darkseagreen;">
模块二
</section>
<section style="background:darkcyan;">
模块三
</section>
<section style="background:rosybrown;">
模块四
</section>
</div>
</div>
自适应布局
为不同大小的屏幕，创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。分辨率变化时，页面元素的位置发生改变而大小不变。使用@media媒体查询给不同尺寸的设备配置不同的样式。
优点：能够更好的适配不同屏幕尺寸的设备
缺点：媒体查询是有限的，一般只有主流尺寸，要匹配足够多的屏幕大小工作量太大
响应式布局
流式布局＋自适应布局，为不同大小的屏幕创建多个流式布局，分辨率发生变化时，元素的位置和大小都会改变。同样使用@media媒体查询把不同的样式配给不同尺寸的设备。
优点：可以同时适应PC端和移动端，效果较好
缺点：跟自适应布局一样，媒体查询有限，一般以主流宽高为主来布局，如果需要匹配足够多的屏幕大小工作量太大
注意点：媒体查询需要设置屏幕尺寸断点，在设置断点时可以根据实际应用情况来考虑断点，如只面向PC；PC+平板；平板+手机；只有手机；全兼容等。
一般内容较少的站点可以使用全兼容；而如果内容非常多，站点比较复杂，则可以采用PC+平板共用一套布局，手机端单独一套布局。
全兼容的内容使用流式布局，然后借助采用boostrap的关键断点并结合根据具体情况增加一些局部断点来进行优化。
只面向PC的话可以参考1280,1440,1920等常见尺寸来设置断点。
PC+平板的话可以设置窄屏，宽屏和超大屏。
平板+手机的话可以设置544（手机横屏）,768（ipad竖屏）来设置断点。
只有手机的话其实并不需要断点，配合弹性布局和rem布局就可以较好的适配不同大小的手机屏幕。
//屏幕宽度大于1024px，用min-width时小的放在上面大的放在下面，常见于移动端
@media screen and (min-width:768px){
body{
font-size:14px;
}
}
@media screen and (min-width:1024px){
body{
font-size:14px;
}
}
//屏幕宽度小于1920px，用max-width时大的放在上面小的放在下面，常见于PC端
@media screen and (max-width:1920px){
body{
font-size:14px;
}
}
@media screen and (max-width:1440px){
body{
font-size:14px;
}
}
//屏幕宽度大于1024px且小于1920px
@media screen and (min-width:1024px) and (max-width:1920px){
body{
font-size:14px;
}
}
rem/em布局
使用rem/em作为长度单位来进行页面布局，相对于百分比布局更加灵活，主要用于移动端。
em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对象内的文本字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em的值是不固定的，它会继承父元素的字体大小。当父元素已经声明过font-size:1.2em时，子元素如果也是12px的话应该声明为font-size:1em而不是font-size:1.2em。
任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合: 1em=16px。为了简化尺寸换算，需要在body中声明font-size=62.5%，这就使1em值变为 16px*62.5%=10px，即1em=10px。
缺点：字体大小逐层嵌套时会发生连锁反应，计算起来不方便。
rem是CSS3新增的一个相对单位，但跟em不同的是，它相对的只是HTML根元素。它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
缺点：只支持IE9及以上的浏览器
解决办法：多写一个绝对单位的声明，让无法识别的浏览器忽略rem设定的字体大小。
适用范围：对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
flex布局
跟传统依赖display+position+float布局形式不同的一种新的布局方式，可以简便、完整、响应式地实现各种页面布局。另外写。
标签：style 简单 gre 响应 方便 屏幕宽度 识别 phone display
原文地址：https://www.cnblogs.com/hjynotes/p/12945981.html
