常见布局

Posted 2020-12-22 hjynotes

常见的布局方式

静态布局

常见于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布局形式不同的一种新的布局方式，可以简便、完整、响应式地实现各种页面布局。另外写。