HTML的布局方式

最新推荐文章于 2024-07-28 09:00:00 发布

lord_of_war

最新推荐文章于 2024-07-28 09:00:00 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/lord_of_war/article/details/109752850

版权

静态布局:

最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。

布局特点：

不论屏幕的大小，页面宽高始终不变，始终维持最初设计时的样式大小来显示；常规的PC端网页都是用的静态布局，也就是设置了min-width，当小于这个宽度的时候出现滚动条，当大于的时候让内容居中，外加背景。

设计方法:

PC :
居中布局，所有的元素样式都使用绝对的宽高（px），设计一个布局，当屏幕大小进行变化时，使用滚动条进行查阅被遮挡的部分。

移动端：
另建立一个移动网站，单独设计一个布局，使用不同的域名（wap.或 m.）这种移动端布局常见于2G和3G时期，现在很少使用了。

优点：
这种布局方式对设计师和CSS编写者来说最为简单，也不存在兼容性的问题。

缺点：
很明显，这种布局方式不能对不同的屏幕做出不同的表现。
当前，许多的门户网站、大部分企业的PC宣传都会选择这种布局方式，会有更好的展示效果。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单方法。到这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

流式布局：

布局特点：

当屏幕分辨率大小发生变化时，页面里的元素大小会变化但布局不会发生变化。

设计方法：

使用%百分比来定义宽度，高度大都是用px来固定，可以根据可视区域（viewpoint）和父元素的实时尺寸进行调整，尽可能的去适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局在web前端开发的早期历史上，用来应对不同尺寸的PC屏幕那时是的屏幕尺寸的差异没有现在那么大），在当今的移动端开发也是常用的布局方式。

缺点：
如果屏幕的尺度跨度太大，那么在相对原始设计而言过大或过小的屏幕上就不能正常的进行显示。因为宽度是使用的%来定义的，但是高度和文字的大小等都是用px来固定的，所以在大屏幕上有些元素的宽度被拉的很长，但是高度、文字的大小还是原来的样式，就会显得非常不协调。

自适应布局：

自适应布局就是为不同的屏幕定义不同的布局，就是创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变不同的屏幕分辨率可以切换不同的静态布局（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

布局特点：

当屏幕的大小发生变化时，页面里面的元素的位置会变化而大小不会变化。

设计方法：

使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。
在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际上还是固定的布局。

响应式布局:

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、平板、智能手表的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者来说，有多种手法可以去实现，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，就是页面元素宽度随着窗口调整而自动适配。即：创建多个流式布局，分别对应一个屏幕分辨率范围。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式布局几乎已经成为优秀页面布局的标准。

<!DOCTYPE html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>媒介查询</title>
        <style type="text/css">
            #div1 {
                background: lightblue;
                height: 100px;
            }
            
            @media only screen and (min-width: 100px) and (max-width: 640px) {
                #div1 {
                    background: lightgreen;
                    height: 200px;
                }
            }
        </style>
    </head>

    <body>
        <div id="div1">
            Hello World!
        </div>
    </body>

</html>

响应式栅格系统

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>响应式栅格</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                height: 100%;
                font: 20px/20px "microsoft yahei";
            }
            
            div {
                min-height: 100px;
            }
            
            .row {
                width: 800px;
                background: deepskyblue;
                margin: 0 auto;
            }
            
            .row:after {
                content: ' ';
                display: table;
                clear: both;
            }
            
            .col25 {
                width: 25%;
                background: lightgreen;
            }
            
            .col50 {
                width: 50%;
                background: lightcoral;
            }
            
            .col75 {
                width: 75%;
                background: lightblue;
            }
            
            [class*=col] {
                float: left;
            }
            /*0-480手机*/
            
            @media only screen and (max-width:480px) {
                .row {
                    width: 100%;
                }
                [class*=col] {
                    float: none;
                    margin-top: 5px;
                    width: 100%;
                }
            }
            /*480-960平板，手机横屏*/
            @media only screen and (min-width: 480px) and (max-width: 960px) {
                .row {
                    width: 480px;
                }
            }
            /*960PC屏幕*/
            @media only screen and (min-width:960px) {
                .row {
                    width: 960px;
                }
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header" class="row">
                header
            </div>
            <div id="main" class="row">
                <div id="left" class="col25">left</div>
                <div id="center" class="col50">center</div>
                <div id="right" class="col25">right</div>
            </div>
            <div id="footer" class="row">
                footer
            </div>
        </div>
    </body>

</html>

布局特点：

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
设计方法:媒体查询+流式布局。通常使用@media媒体查询和网格系统配合相对布局单位进行布局，实际上就是综合响应式。流失等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。

优点：
对PC和移动端有着非常好的适应，只要有足够的耐心，效果会非常棒。

缺点：
媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
要想适配更多的屏幕大小，工作量大，设计也需要多个版本。

响应式页面在头部会加上这一段代码：

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

总结：

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的CSS，而且CSS都是采用%百分比的，而不是固定宽度，不同点就是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套模板，只不过是长度或是图片变小了，不会根据不同的设备展示不同的样式，流式及时采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式像流水一样，一部分一部分的加载，静态的就是采用固定的宽度。
流式布局是用于解决类似的设备不同分辨率之间的兼容（一般分辨率差异较少）；响应式是用于解决不同设备之间不同分辨率之间的兼容问题（一般是指PC，平板，手机等设备之间较大的分辨率差异）。

弹性布局：

rem、em区别：
两者都是顺应不同网页字体大小展示而产生的。
em是相对其父元素，在实际应用中相对而言会带来很多不便；
rem则是始终相对于html大小，即页面根元素。

布局特点：

使用em或rem单位进行布局，相对%更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。
包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用%或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }

浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
html{font-size:62.5%;}

优点：
理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

缺点：
这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

响应式和弹性布局之间的对比：
响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。
rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

结论：
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            
            html,
            body {
                height: 100%;
            }
            
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;  /*当前块为弹性盒*/
            }
            #menu li{
                flex: auto;  /*弹性盒中的单项*/
                float: left;
            }
            #menu li a{
                display:block;
                height: 26px;
                line-height: 26px;
                border:1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <ul id="menu">
            <li><a href="#" class="item">公司简介</a></li>
            <li><a href="#" class="item">商品展示</a></li>
            <li><a href="#" class="item">后台管理</a></li>
            <li><a href="#" class="item">企业文化</a></li>
            <li><a href="#" class="item">在线咨询</a></li>
        </ul>
    </body>

</html>

lord_of_war

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的布局方式

静态布局:最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。布局特点：不论屏幕的大小，页面宽高始终不变，始终维持最初设计时的样式大小来显示；常规的PC端网页都是用的静态布局，也就是设置了min-width，当小于这个宽度的时候出现滚动条，当大于的时候让内容居中，外加背景。设计方法:PC :居中布局，所有的元素样式都使用绝对的宽高（px），设计一个布局，当屏幕大小进行变化时，使用滚动条进行查阅被遮挡的部分。移动端：另建立一个移动网站，单独设计一个布局，使用不同的域名（wap.
复制链接

扫一扫