自适应布局_css自适应布局 - CSDN
精华内容
参与话题
  • 几种自适应布局方法

    2019-07-03 04:14:14
    <div class="left"><...左侧固定宽度,右侧自适应布局 1、左侧使用float浮动,给固定宽度,右侧设置margin-left:  .left{float:left;width:300px;background:#F00;}  .right{margin...

      <div class="left"></div>

      <div class="right"></div>

    左侧固定宽度,右侧自适应布局

    1、左侧使用float浮动,给固定宽度,右侧设置margin-left:

      .left{float:left;width:300px;background:#F00;}

      .right{margin-left:300px;background:#00F;}

    2、左侧使用绝对定位absolute;固定宽度,右侧设置margin-left:

      .left{position:absolute;left:0;width:300px;background:#F00;}

      .right{margin-left:300px;background:#00F;}

    3、左侧使用绝对定位,固定宽度,右侧也使用绝对定位(父级给相对定位):

      .left{position:absolute;left:0;width:300px;background:#F00;}

      .right:{position:absolute;left:300px;background:#00F;}

    左侧自适应,右侧固定宽度

    1、左侧用左浮动,margin-right为负值,值为右边距==右侧层的宽度的负值(左撑开,距离右侧的距离不错层), 右侧的右浮动,固定宽度:

      .left{float:left;width:100%;margin-right:-300px;background:#F00;}

      .right{float:right;width:300px;background:#00F;}

    2、左侧右侧都使用固定定位,右侧固定宽度(父级设置相对定位):

      .left{position:absolute;right:300px;width:auto;background:#F00;}

      .rigth{position:absolute;right:0;width:300px;background:#00F;}

     

    三列布局

      <div class="center"></div>

      <div class="left"></div>

      <div class="right"></div>

    首先为这三列都设置浮动:

      .center,.left,.right{float:left;height:500px;}

    同时为它们指定宽度:

      .left{width:300px;background:#F00;}

      .right{width:400px;background:#0F0;}

      .center{width:100%;background:#00F;}

    现在我们要让left在左边,相当于就是让它覆盖在center的上面,所以我们只需要left添加:

      .left{margin-left:-100%;}

    同时要让right在右边可以这样设置:

      .right{margin-left:-400px;}

    注意,此时的Margin的值的绝对值应与right的宽度值相同。

    这里我们为什么要把center放置在left与right之前呢?这个其实涉及元素的堆叠顺序的知识,由于我们三处都设置了浮动,所以从某种意义上讲它们三个就是在同一个平面的(相当于z-index相同),那么,这里就不能根据CSS来判断堆叠顺序了。所以此处的HTML结构就决定了它们的堆叠顺序:后来者居上。我们要想让left在center之上就需要把left放置在center之后。 

     

    转载于:https://www.cnblogs.com/qianphong/p/10381149.html

    展开全文
  • 所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有的布局方案,本质上都是尺寸与定位的结合。 大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性...

    前言

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,上干货!

    所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有的布局方案,本质上都是尺寸与定位的结合。

    大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局,inline-block布局,弹性盒布局这几个名词。现在对布局也算有一点了解,做个总结巩固一下。如果你也看了很多资料,但是实际动手时对布局还是无从下手的话,希望本文可以帮你理清思路。

    唠叨一句:看到一个效果图的时候,千万不要急着手贱去敲代码!先思考清楚页面的构造,理清各元素之间的关系,特别需要注意的是在不同的设备下需要有怎样的展现,当你思路清晰找到最好的布局方案时,coding其实真的不需要多少时间。

    尺寸相关


    为什么要先说尺寸呢?因为尺寸在布局中的作用非常核心,布局方式定位这些只是改变了元素之间的关系,没有尺寸就什么也不是。比如我们通常会用margin来控制跟其他元素的距离,这就是布局。

    很多人都会觉得,什么width、margin太简单了,早就掌握了。这种心态我一开始学习CSS的时候也有,觉得很好理解很简单,但是后面才发现自己原来很多东西都没真正掌握。看看张鑫旭大神给我们上的政治课:http://www.zhangxinxu.com/wordpress/2012/07/bottleneck-css-study/ 

    先说说百分比,百分比是相对父对象的,这里特性非常好用,很多时候会用在自适应布局上面。浏览器尺寸的改变,就是根节点html的长宽改变,我们可以用%来将浏览器尺寸和元素尺寸联系起来,做到自适应。

    另外一个比较有意思的是auto,auto是很多尺寸值的默认值,也就是由浏览器自动计算。首先是块级元素水平方向的auto,块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候,该元素的宽度也会随之变化。

    auto

    但是当该元素被设为浮动时,该元素的width就变成了内容的宽度了,由内容撑开,也就是所谓的有了包裹性。overflow | position:absolute | float:left/right都可以产生包裹性,替换元素也同样具有包裹性。在具有包裹性的元素上想利用width : auto;来让元素宽度自适应浏览器宽是不行的。

    包裹性

    高度方向:外边距重叠,外边距auto为0,这两点需要注意。书写方向什么的,接触比较少就不扯了。

    那为什么margin:auto对不能计算垂直方向的值呢?很简单,垂直方向是被设计成可以无限扩展的,内容越多浏览器便产生滚动条来扩展,所以垂直方向都找不到一个计算基准,以此返回一个false,便成了0。

    用处:通过width、height控制大小,各个方向的margin值控制与边界或者其他元素的距离来定位。

    浮动


    目前PC网站大多使用float布局,从成本上考虑大改的概率很小,所以不要说浮动无用,总是会有机会让你维护的!代表网站:淘宝、腾讯、百度,好吧BAT都到齐了。

    浮动听得多了,博客园上关于用浮动布局的介绍也非常的多。浮动原本用于文本环绕,但却在布局被发扬光大,这就是命!我的理解:浮动布局的核心就是让元素脱离普通流,然后使用width/height,margin/padding将元素定位。脱离普通流的元素,就像脱离地心引力一样,与普通流不在一个高度上。这个跟图层的概念类似。高度不同所以可以叠在其他元素上面产生重叠或者使用负边距跑到父元素外,理解了这一点浮动布局就很好理解了。

    图层

    下面用个圣杯布局的例子说明一下,理解了这个之后其他布局更加简单:

    left,宽度固定,高度可固定也可由内容撑开
    right,宽度固定,高度可固定也可由内容撑开
    center,可以自适应浏览器宽度,高度可固定也可由内容撑开。


    HTML & CSS:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>宽度自适应布局</title>
            <style>
                .wrap {
                    background-color: #D66464;
                }
                .clearfix:after {
                    content: "";
                    clear: both;
                    display: block;
                }
                .left {
                    float: left;
                    width: 100px;
                    background: #00f;
                    height: 180px;
                }
                .right {
                    float: right;
                    width: 150px;
                    background: #0f0;
                    height: 200px;
                }
                .center {
                    background: #FFFFFF;
                    margin-left: 110px;
                    margin-right: 160px;
                    height: 150px;
                }
            </style>
        </head>
        <body>
            <div class="wrap clearfix">
                <div class="left">left,宽度固定,高度可固定也可以由内容撑开。</div>
                <div class="right">right,宽度固定,高度可固定也可以由内容撑开。</div>
                <div class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</div>
            </div>
        </body>
    </html>

    原理非常简单,左右侧边栏定宽并浮动,中部内容区放最后不浮动、默认width:auto并设置相应外边距,让左右侧边栏浮动到上面。注意:子元素设置为浮动之后,父对象的高度就坍塌了,需要设置父对象后的元素清除浮动,这样父对象的高度才能被浮动子元素撑起来了。

    当然,我们也要问一下,为啥父对象高度会坍塌呢?上面也说过了,浮动元素已经脱离了普通流,父对象所在的普通流比喻成地表,那浮动元素就已经上天了。但是父对象还在地表啊,从外太空看浮动元素在父对象里面,但是其实并不在,又怎么能撑开父对象呢?宽度如果我们不设置的话,其实也是为0的,因为父对象里面空空如也,所以宽高为0。

    上天

    要撑开的办法就两个,1是让父对象也上天(。。。你咋不上天呢),2是把浮动元素的边框边界拉下来。

    父对象也上天(即浮动)的话,那就不能实现宽度自适应了。因为float元素的width:auto是包裹内容的,参考前面说的!

    办法2就是在后面的元素里加一个clear语句。说到这个问题就要扯到clear与BFC了,我就不献丑了。传送门:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

    这个三列布局还有个双飞的变种,就是在HTML中center部分也就是内容区提到最前面,也就是内容先行渲染。在网络不好的时候,左右双翼能不能出来不要紧,先让主体内容出来!这种想法,明显的优秀工程师思维,但,尼玛的双翼都是广告啊。广告不出来,哪能赚钱养你们这群工程师?所以提出双飞的玉伯才离开了淘宝???(纯属意淫,如真属实,当我扯淡,哈哈哈!)

    哈哈哈

    先上码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>宽度自适应布局</title>
            <style>
                .wrap {
                    background-color: #FBD570;
                    margin-left: 100px;
                    margin-right: 150px;
                }
                .clearfix:after {
                    content: "";
                    clear: both;
                    display: block;
                }
                .left {
                    float: left;
                    width: 100px;
                    background: #00f;
                    height: 180px;
                    margin-left: calc(-100% - 100px); 
                }
                .right {
                    float: right;
                    width: 150px;
                    background: #0f0;
                    height: 200px;
                    margin-right: -150px;
                }
                .center {
                    background: #B373DA;
                    height: 150px;
                    float: left;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="wrap clearfix">
                <div class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</div>
                <div class="left">left,宽度固定,高度可固定也可以由内容撑开</div>
                <div class="right">right,宽度固定,高度可固定也可以由内容撑开</div>
            </div>
        </body>
    </html>

    思路:

    1)既然HTML里面要让center放前面,为了让left跑到center前面,那center也必须浮动了,否则因为都是块元素他们会分两行。

    2)浮动之后还要让center宽度自适应,那明显width只能100%,然后在父元素中设width:auto,还有两侧margin,其实也就是父对象宽度自适应,center只是继承content的宽度。

    3)对left使用负的margin让他们浮动到上方去。

    代码里面我用到了一个calc(),这个CSS3带来的计算函数简直酷毙了!本例里如果不使用calc函数,那么就需要wrap左边距为0,left左边距-100%,然后center多加一层子块DIV设置margin-left:100px,可以达到同样的效果!calc函数与百分比配合就足以实现自适应的要求!目前所有的自适应布局都在利用浏览器来为我们计算尺寸,但是有了calc之后我们就可以自己制定规则!单是想想都高潮了吧?

    总结:使用浮动来进行布局,一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动,难以把握。在元素较多而且元素高度尺寸不一的情况下,单纯使用浮动只能实现上端对齐,这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容,将元素做成等高排列,从美观上看也当然也是极好的,比参差不齐的排列要美观。

    普通流布局


    普通流布局:display : inline-block!这是一个传说中取代float布局的存在。看了一些网站,PC端浮动为主,移动端的也用的不多啊,已经有些使用flex的了,说好的inline-block一统江湖呢?

    使用inline-block之前先处理点小障碍:inline-block元素会有4px左右的空隙,这个是因为我们写代码时候的换行符所致。

    4px间隙

    解决办法很简单:在inline-block的父元素中设置样式font-size:0;letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size:值;letter-spacing: 值px;  恢复正常的显示。

    消除4px间隙

    另外还有一点需要注意的是inline-block默认是基线对齐的,而inline-block的基线又跟文本基线一致,所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。这里补充一下基线的内容,没你想的那么简单哦。分有文字和无文字两种情况:

    1)无文字:容器的margin-bottom下边缘。与容器内部的元素没一毛钱关系。

    2)有文字:最后一行文字的下边缘,跟文字块(p,h等)的margin、padding没关系!注意是最后一行,无论文字在什么子对象容器内在什么位置都没关系,浏览器会找到最后一行文字对齐底部。

    你们感受一下:

    baseline-01    baseline-02    baseline-03

    警示:inline-block的基线是最后一行文字的底部,flex里面的基线是第一行文字的底部(请看下文阮老师的文章)

    baseline-04

    满满的都是泪啊。。。既然都叫baseline,何必呢?

    ohmygod

    使用inline-block进行圣杯布局:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>宽度自适应布局</title>
            <style>
                .wrap {
                    background-color: #FBD570;
                    font-size: 0;
                    letter-spacing: -4px;  /*用于兼容safari,根据不同字体字号或许需要做一定的调整*/
                    margin-left: 100px;
                    margin-right: 150px;
                }
                .wrap * {
                    font-size: 1rem;
                    letter-spacing: normal;
                }
                .left {
                    display: inline-block;
                    vertical-align: top;
                    width: 100px;
                    background: #00f;
                    height: 180px;
                    margin-left: -100px;
                }
                .right {
                    display: inline-block;
                    vertical-align: top;
                       width: 150px;
                    background: #0f0;
                    height: 200px;
                    margin-right: -150px;
                }
                .center {
                    display: inline-block;
                    vertical-align: top;
                    background: #B373DA;
                    height: 150px;
                    min-width: 150px;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="wrap">
                <div class="left">left,宽度高度固定</div>
                <div class="center">center,可以自适应浏览器宽度,高度固定。</div>
                <div class="right">right,宽度高度固定</div>
            </div>
        </body>
    </html>

    这里也没什么好说的,用到的也是width:auto和width:100%这两点,简单知识点的简单用法。

    双飞的话,代码跟圣杯的基本相同,注意在html的顺序变为center>right>left,只改左栏移动的margin-left: calc(-100% - 100px)到预定位置即可。不能用calc的话可以在center里面再加一层,跟浮动一样的处理方式。更简单的方法是使用CSS3带给我们的box-sizing属性。请看代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>宽度自适应布局</title>
            <style>
                .wrap {
                    background-color: #FBD570;
                    font-size: 0;
                    letter-spacing: -4px;  /*用于兼容safari,根据不同字体字号或许需要做一定的调整*/
                    margin-right: 150px;
                }
                .wrap * {
                    font-size: 1rem;
                    letter-spacing: normal;
                }
                .left {
                    display: inline-block;
                    vertical-align: top;
                    width: 100px;
                    background: #00f;
                    height: 180px;
                    margin-left: -100%;
                }
                .right {
                    display: inline-block;
                    vertical-align: top;
                       width: 150px;
                    background: #0f0;
                    height: 200px;
                    margin-right: -150px;
                }
                .center {
                    display: inline-block;
                    vertical-align: top;
                    background: #B373DA;
                    height: 150px;
                    min-width: 150px;
                    width: 100%;
                    box-sizing: border-box;
                    padding-left: 100px;
                    background-origin: content-box;
                    background-clip: content-box;
                }
            </style>
        </head>
        <body>
            <div class="wrap">
                <div class="center">
                    center,可以自适应浏览器宽度,高度固定。
                </div>
                <div class="right">right,宽度高度固定</div>
                <div class="left">left,宽度高度固定</div>
            </div>
        </body>
    </html>

    总结:相比浮动inline-block更加容易理解,也更符合我们的认知,结合盒子模型的几个控制属性就可以进行布局了。对于元素高度不同的情况,目前浮动布局的做法都是将元素做成等高元素进行展现,这从美学上看也符合整齐的要求,不过牺牲了一部分内容。但inline-block有vertical-align属性,可以很好地解决元素高度不同而带来的布局问题。用过之后,你也会喜欢上inline-block的。。。至少我会!

    绝对定位


    前面的浮动和普通流中其实定位都是靠盒子模型控制的,与我们常说的定位还是有差别的。而绝对定位就是我们平常所说的定位,给定参考坐标系+坐标确定位置。关于绝对定位的资料太多,我就不说了。提一点就是absolute定位的基准是最近的非static定位父对象,而fixed是相对html根节点的定位。两种定位都会脱离普通流,跟之前说的浮动一样,上天了。

    上天

    当然,他们跟浮动在空间中的位置还是有差别的,项目中有遇到这个问题的请参考张大婶的文章: http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/  还是要结合项目来看,否则看过也只是看过而已,并不会存到你的脑子里,毕竟还是相当抽象相当理论性的东西。借用张大神的一个总结图:

    2016-01-07_223349

    使用绝对定位(特指absolute)做自适应布局跟前面两种方式没太大差别,宽度自适应还是在auto和100%上做文章,而位置则由top/bottom/left/right等控制。还是以圣杯布局来举例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>宽度自适应布局</title>
            <style>
                .wrap {
                    position: relative;
                    background-color: #FBD570;
                    margin-left: 100px;
                    margin-right: 150px;
                    height: 250px;
                }
                .left {
                    position: absolute;
                    top: 0;
                    left: -100px;
                    width: 100px;
                    background: #00f;
                    height: 180px;
                }
                .right {
                    position: absolute;
                    top: 0;
                    right: 0;
                       width: 150px;
                    background: #0f0;
                    height: 200px;
                    margin-right: -150px;
                }
                .center {
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #B373DA;
                    height: 150px;
                    min-width: 150px;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="wrap">
                <div class="center">
                    center,可以自适应浏览器宽度,高度固定。
                </div>
                <div class="left">left,宽度高度固定</div>
                <div class="right">right,宽度高度固定</div>
            </div>
        </body>
    </html>

    父元素为relative,子元素为absolute,这样的话,又会出现跟浮动一样的问题:父对象高度坍塌,子元素不能撑起父对象。原因也跟浮动一样,解决办法的话目前我知道的只有给父对象指定一个确定height值,大家如果有更好的办法,请联系我!

    总结:单纯使用绝对定位进行自适应布局的情况很少,一般绝对定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低,因为它会频繁触发浏览器的重排。另外提一点:CSS3的transform会对绝对定位产生影响哦~比如说让fixed定位不再固定在浏览器视窗的黑魔法:http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/ 

    弹性盒子


    CSS3中对布局影响最大的莫过于弹性盒子模块了,这是一套区别于以往盒子模型布局的全新方案。上面几种方法你可以看到,为了实现自适应我们用的都是width:auto和100%的嵌套以及各种边距的移动定位,这套规则并不符合我们的认知。为什么不能开拓出一块区域,横竖排列都可以,内部所有元素的尺寸可以按照一个规则和这个区域的大小联系起来?终于CSS3做出了改变,引入了flex弹性布局方案,弹性盒布局有如下优势:
           1.独立的高度控制与对齐。
           2.独立的元素顺序。
           3.指定元素之间的关系。
           4.灵活的尺寸与对齐方式。

    在MDN上有非常简单易懂的基础教程https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

    flexbox

    上面也已经给出了圣杯布局的自适应布局方案,所以代码就不贴了不过这个例子实现的是3栏成比例缩放,左右栏如果需要固定值的话可以写成  flex: 0 0 150px; 的样式。

    但是上面的教程没有给出各个属性的详细解释,建议看看阮一峰的博文,详细易懂而且配图超漂亮的有木有:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    总结:弹性盒子在移动端的应用会越来越普遍,这套模型值得去好好研究。语法规则都是非常贴近人性,非常灵活,浏览器兼容性也非常好,当然国内百花齐放的移动浏览器会有哪些大坑呢?我们拭目以待~

    其他


    其他包括position:relative和CSS3中的transform都可以实现定位,但是由于他们在原来的普通流中还占着一个坑,所以很少用来布局啥的。transform是个很酷炫的东西,可以用平面的素材做出很多3D的效果,而且不需要js就可以做,非常好玩。此文已经很长,就不多说了,以后会写一篇文章来专门说说她的故事。

     

    总结以上!文字太多,放个图片来调和下~~~觉得不错的同学,请点赞!觉得错了的同学,请联系我!

    照片 1556_副本

    (图片出处:著名摄影师 小杨同学,转载请注明)

     

    展开全文
  • 如何实现自适应布局的?

    千次阅读 2018-02-05 17:07:30
    最近为了能够做出自适应的页面找了很多资料,大致较为有用的两类 1.根据屏幕大小不同引入不同的css样式文件 "css/css-pc.css" rel=...2.使用rem单位实现自适应布局 转载自:http://caibaojian.com/web-app

    最近为了能够做出自适应的页面找了很多资料,大致较为有用的两类

    1.根据屏幕大小不同引入不同的css样式文件

    <link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">

    2.使用rem单位实现自适应布局

    转载自:http://caibaojian.com/web-app-rem.html

    摘要:rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。

    rem是什么?

    rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    为什么web app要使用rem?

    这里我特别强调web app,web page就不能使用rem吗,其实也当然可以,不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力,接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。

    1、实现强大的屏幕适配布局:

    最近iphone6一下出了两款尺寸的手机,导致的移动端的屏幕种类更加的混乱,记得一两年前做web app有一种做法是以320宽度为标准去做适配,超过320的大小还是以320的规格去展示,这种实现方式以淘宝web app为代表作,但是近期手机淘宝首页进行了改版,采用了rem这个单位,首页以内依旧是和以前一样各种混乱,有定死宽度的页面,也有那种流式布局的页面。

    我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局、限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法。

    例如流式布局的解决方案有不少弊端,它虽然可以让各种屏幕都适配,但是显示的效果极其的不好,因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果,但是目前行业里用流式布局切web app的公司还是挺多的,看看下面我收集的一些案例:

    1.亚马逊:

    这里写图片描述

    2.携程:

    这里写图片描述

    3.兰亭

    这里写图片描述

    上面的网站都是采用的流式布局的技术实现的,他们在页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度还是和原来一样,实际显示非常的不协调,这就是流式布局的最致命的缺点,往往只有几个尺寸的手机下看到的效果是令人满意的,其实很多视觉设计师应该无法接受这种效果,因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。

    流式布局并不是最理想的实现方式,通过大量的百分比布局,会经常出现许多兼容性的问题,还有就是对设计有很多的限制,因为他们在设计之初就需要考虑流式布局对元素造成的影响,只能设计横向拉伸的元素布局,设计的时候存在很多局限性。
    2.固定宽度做法

    还有一种是固定页面宽度的做法,早期有些网站把页面设置成320的宽度,超出部分留白,这样做视觉,前端都挺开心,视觉在也不用被流式布局限制自己的设计灵感了,前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题,例如在大屏幕手机下两边是留白的,还有一个就是大屏幕手机下看起来页面会特别小,操作的按钮也很小,手机淘宝首页起初是这么做的,但近期改版了,采用了rem。
    3.响应式做法

    响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做,主要原因是工作大,维护性难,所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位,因为这样反而可以节约成本,不用再专门为自己的网站做一个web app的版本。
    4.设置viewport进行缩放

    天猫的web app的首页就是采用这种方式去做的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效,不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

    rem能等比例适配所有屏幕

    上面说过rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子:

    html{
        font-size:20px;
    }
    .btn {
        width: 6rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.2rem;
        display: inline-block;
        background: #06c;
        color: #fff;
        border-radius: .5rem;
        text-decoration: none;
        text-align: center;    
    }
    
    Demo 上面代码结果按钮大小如下图:

    这里写图片描述

    我把html设置成10px是为了方便我们计算,为什么6rem等于60px。如果这个时候我们的.btn的样式不变,我们再改变html的font-size的值,看看按钮发生上面变化:

    html{
        font-size:40px;
    }

    Demo

    按钮大小结果如下:

    这里写图片描述

    上面的width,height变成了上面结果的两倍,我们只改变了html的font-size,但.btn样式的width,height的rem设置的属性不变的情况下就改变了按钮在web中的大小。

    其实从上面两个案例中我们就可以计算出1px多少rem:

    第一个例子:

    120px = 6rem * 20px(根元素设置大值)

    第二个例子:

    240px = 6rem * 40px(根元素设置大值)

    推算出:

    10px = 1rem 在根元素(font-size = 10px的时候);

    20px = 1rem 在根元素(font-size = 20px的时候);

    40px = 1rem 在根元素(font-size = 40px的时候);

    在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮,html font-size的改变就会导致按钮的大小发生改变,我们并不需要改变先前给按钮设置的宽度和高度,其实这就是我们最想看到的,为什么这么说?接下来我们再来看一个例子:

    Demo

    这里写图片描述

    由上面两个的demo中我们知道改变html的font-size可以等比改变所有用了rem单位的元素,所以大家可以通过chrome浏览器的调试工具去切换第三个的demo在不同设备下的展示效果,或者通过缩放浏览器的宽度来查看效果,我们可以看到不管在任何分辨率下,页面的排版都是按照等比例进行切换,并且布局没有乱。我只是通过一段js根据浏览器当前的分辨率改变font-size的值,就简单的实现了上面的效果,页面的所有元素都不需要进行任何改变。

    到这里肯定有很多人会问我是怎么计算出不同分辨率下font-size的值?

    首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。

    这里写图片描述

    上面的表格蓝色一列是Demo3中页面的尺寸,页面是以640的宽度去切的,怎么计算不同宽度下font-site的值,大家看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

    Demo3中我是通过JS去动态计算根元素的font-size,这样的好处是所有设备分辨率都能兼容适配,淘宝首页目前就是用的JS计算。但其实不用JS我们也可以做适配,一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备,然后去针对那些设备去做media query设置也可以实现适配,例如下面这样:

    html {
        font-size : 20px;
    }
    @media only screen and (min-width: 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min-width: 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min-width: 481px){
        html {
            font-size: 30px !important; 
        }
    }
    @media only screen and (min-width: 569px){
        html {
            font-size: 35px !important; 
        }
    }
    @media only screen and (min-width: 641px){
        html {
            font-size: 40px !important; 
        }
    }

    上面的做的设置当然是不能所有设备全适配,但是用JS是可以实现全适配。具体用哪个就要根据自己的实际工作场景去定了。

    下面推荐两个国内用了rem技术的移动站,大家可以上去参考看看他们的做法,手机淘宝目前只有首页用了rem,淘宝native app的首页是内嵌的web app首页。

    淘宝首页:m.taobao.com

    D X:m.dx.com

    最后我们再来看一看他的兼容性:

    这里写图片描述

    在线工具

    @blinkcat,rem是可以合并雪碧图的,viewport设置确实简洁,但是过于粗暴,全局都进行缩放,有时候我布局并不希望全局缩放,部分布局希望不用缩放,所以使用rem,不过具体使用什么方法大家都可以根据实际情况衡量。并不是每个人都喜欢使用sass,所以在px转rem这块我做了一个在线转换工具:http://520ued.com/tools/rem
    REM自适应JS

    具体使用方法请参考这篇文章:http://caibaojian.com/simple-flexible.html

    //designWidth:设计稿的实际宽度值,需要根据实际设置
    //maxWidth:制作稿的最大宽度值,需要根据实际设置
    //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
    ;(function(designWidth, maxWidth) {
        var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width>maxWidth && (width=maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }
    
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
        refreshRem();
    
        win.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
    
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
    展开全文
  • CSS+DIV自适应布局

    2019-03-23 17:01:11
    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"/> <title>左右两侧,左侧...
        

    CSS+DIV自适应布局

    1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满)

    代码如下:

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>左右两侧,左侧固定宽度200px;右侧自适应占满</title>
            <style>        
            .box{
                width:800px;
                height:300px;
                margin:0 auto;
            }
            .left{
                width:200px;
                height:300px;
                background:#f00;
                float:left;
            }
            .right{
                height:300px;
                margin-left:200px;
                background:#0f0;
            }
            </style>
        </head>
        <body>        
            <div class="box">
                <div class="left"></div>
                <div class="right"></div>    
            </div>    
        </body>
    </html>

    运行结果如下图:

    图片描述

    • 两栏布局(左定宽,右自动)
    • float + margin

    2.三列布局(左中右三列,左右200px固定,中间自适应占满)

    方法一(左右浮动,中间 margin-left,margin-right,中间div在最后)

    • 代码如下
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>左中右三列,左右200px固定,中间自适应占满 方法一</title>
            <style>
    .box{
        width:800px;
        height:300px;
        margin:0 auto;
    }
    .left{
        width:200px;
        height:300px;
        background:#f00;
        float:left;
    }
    .right{
        width:200px;
        height:300px;
        float:right;
        background:#0f0;
    }
    .center{
        height:300px;
        background-color:#00f;
        margin:0 200px;
    }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center"></div>
            </div>        
        </body>
    </html>
    • 运行结果如下图图片描述

    方法二(左中右定位):

    • 代码如下
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>左中右三列,左右200px固定,中间自适应占满 方法二</title>
            <style>        
    .box{
        width:1000px;
        height:300px;
        margin:0 auto;
        position:relative;
    }
    .left{
        width:200px;
        height:300px;
        background:#f00;
        position:absolute;
        top:0px;
        left:0px;
    }
    .right{
        width:200px;
        height:300px;
        background:#0f0;
        position:absolute;
        top:0px;
        right:0px;
    }
    .center{
        height:300px;
        background-color:#00f;
        position:absolute;
        left:200px;
        right:200px;
    }
            </style>
        </head>
        <body>        
            <div class="box">
                <div class="left"></div>
                <div class="center"></div>
                <div class="right"></div>                        
            </div>
        </body>
    </html>
    
    • 运行结果如下图:

    图片描述

    3.上中下三行,头部,底部固定高200px,中间自适应占满

    中间定位,底部定位

    • 代码如下:
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>上中下三行,头部,底部固定高200px,中间自适应占满</title>
            <style>        
    *{
        margin:0;
    }
    html{
        height:100%;
    
    }
    body{
        min-height:100%;
    }
    .header{
        width:100%;
        height:100px;
        background-color:#ccc;
    }
    .main{
        width:100%;
        background-color:#f00;
        position:absolute;
        top:100px;
        bottom:100px;
    }
    .footer{
        height:100px;
        width:100%;
        position:absolute;
        bottom:0px;
        background-color:#ccc;
    }
            </style>
        </head>
        <body>
                <div class="header"></div>
                <div class="main"></div>
                <div class="footer"></div>
        </body>
    </html>
    
    • 运行代码如下图:

    图片描述

    4.上下两部分,地下这个股东高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer往下挤

    • 代码如下:
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>上下两部分,地下这个股东高度200px,如果上面的内容少,
            那么这个footer就固定在底部,如果内容多,就把footer往下挤</title>
            <style>    
    *{
        margin:0;
    }
    html{
        height:100%;
    }
    body{
        min-height:100%;
        background-color:#00f;
        position:relative;
    }
    
    .header{
        height:100%;
        background-color:#00f;
        padding-bottom:200px;
    }
    .footer{
        width:100%;
        height:200px;
        position:absolute;
        bottom:0px;
        background-color:#0ff;
    }
            </style>
        </head>
        <body>
                <div class="header">    
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
            sdsadas
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
            sdsadas<br/>
                </div>
                <div class="footer"></div>    
        </body>
    </html>
    • 运行结果如下图:

    图片描述

    新手入门,请多多关照

    展开全文
  • css中常用的几种自适应布局

    千次阅读 2018-08-21 08:59:19
    一、水平居中(使用text-align+inline-block) 代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &......
  • rem自适应布局

    千次阅读 2018-12-26 10:06:19
    摘要:rem是相对于根元素&...本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem...
  • 5种实现自适应页面布局方法

    千次阅读 2018-05-13 10:05:55
    1浮动 2绝对定位 3Flexbox 4表格布局 5 网格布局
  • 页面自适应布局解决方案

    千次阅读 2018-02-08 10:59:18
    rem是如何实现自适应布局的?前端博客•2015-12-27•前端开发教程 | 移动前端开发•rem•83323View0 文章目录rem是什么?为什么web app要使用rem?1、实现强大的屏幕适配布局:2.固定宽度做法3.响应式做法4.设置...
  • 自适应布局

    2020-04-25 20:24:34
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...Document&l...
  • Bootstrap-栅格系统自适应布局

    万次阅读 2016-12-05 12:57:00
    1 container 顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值,这样container与浏览器窗口之间就存在一定距离。...
  • ![图片说明]... 我想设计出这种登陆界面,后面的牌牌是一个背景图片,但是在不同大小的屏幕下,几个EditText控件不能正好在牌字上。该如何使这几个控件始终在牌子上呢?
  • Qt Designer 设计PyQt5界面时自适应设置

    万次阅读 2018-03-12 18:22:01
    今天遇到了一个问题,就是在使用布局的时候,一直没有找到自适应选项。就是如果背景缩小时,前面的控件会被遮住,如下图右边: 最终找到这篇文章,有了思路Qt Creator 窗体控件自适应窗口大小布局 1. 全局...
  • flex布局左右两边固定,中间自适应

    千次阅读 2020-06-15 09:46:03
    <style> #flex{ display: flex; background-color: skyblue; height: 100px; line-height: 100px; } #left,.right{ ...
  • 静态即传统Web设计,对于PC设置一个布局,在屏幕宽高
  • 两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应
  • PC端自适应布局

    万次阅读 2018-09-11 11:02:04
    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 该篇文章为...
  • mainAxisSize: MainAxisSize.min 转载于:https://www.cnblogs.com/qqcc1388/p/11573632.html
  • element ui 自适应布局

    千次阅读 2019-12-27 16:05:33
    灵活使用span中的值的变化来操控自适应布局。 可以达到自适应的效果。 官方的自适应布局是: 响应式: <el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-...
  • cell的应用首先是简单的html:下面是css代码: 以下是效果图:必须注意的是,左侧div必须设置超过父元素减去右侧元素的宽度 但是这个方法会产生一个问题,它会使左边的div高度等于右侧div的高度 二.flex布局同样...
  • 页面布局之上下固定中间自适应

    千次阅读 2018-08-30 09:57:31
    常用的页面布局除了两边固定中间自适应和一端固定另一端自适应之外,还有上下固定中间自适应布局,今天在这里做一下总结。 实现这种布局我主要通过两种方法: 使用绝对定位 对这三栏都实现绝对定位,其中中间...
1 2 3 4 5 ... 20
收藏数 59,185
精华内容 23,674
关键字:

自适应布局