移动端的布局

最新推荐文章于 2024-06-26 22:23:41 发布

新椅子

最新推荐文章于 2024-06-26 22:23:41 发布

阅读量1.6k

点赞数 23

文章标签：前端

本文链接：https://blog.csdn.net/2302_80152806/article/details/136219166

版权

一.流式布局（百分比）

定义：

通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩。

举例：

屏幕里一行中两个盒子各占一半显示，即50%。

<style>
    div{
        width:50%;
        height: 100px;
        background-color: pink;
        float: left; 
    }
    .two{
        background-color: black ;
    }
</style>
<body>
    <div></div>
    <div class="two"></div>
</body>

若盒子一行显示不下，则换行显示。

<style>
    div {
        box-sizing: border-box;
        width: 50%;
        height: 100px;
        border: 1px black solid;
        background-color: pink;
        float: left;
    }
</style>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

二.flex布局

优点：

1.操作方便，布局极为简单，移动端应用很广泛

2.PC端浏览器支持情况较差

3.IE11或更低版本，不支持或仅部分支持

布局原理：

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

！！

任何一个容器都可以指定为flex 布局。

添加flex布局后，可以给行内元素设置宽度和高度

举例：

让div中span在一行显示。

<style>
    div {
        display: flex;
        width: 300px;
        height: 300px;
        background-color: black
    }

    div span {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
</head>

<body>
    <div>
        <span>a</span>
        <span>b</span>
        <span>c</span>
    </div>
</body>

1.父项属性（对父项设置）

flex-direction：设置主轴的方向

决定项目的排列方向，看flex-direction设置谁为主轴，剩下的就是侧轴。

默认主轴方向就是×轴方向，水平向右，侧轴方向就是y 轴方向，水平向下

属性值	说明
row	从左到右（默认值）
row-reverse	从右到左
column	从上到下
column	从下到上

justify-content：设置主轴上的子元素排列方式

使用之前要确定好主轴是哪个

属性值	说明
flex-start	从头部开始（默认），主轴X:从左向右
flex-end	从尾部开始
center	主轴居中对齐。主轴X轴：水平居中
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间

flex-wrap：设置子元素是否换行

默认情况下，项目都排在一条线上，不换行。

属性值	说明
nowrap	不换行（默认）
wrap	换行

align-items：设置侧轴上的子元素排列方式（单行）

侧轴默认为Y轴，子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸（默认）子盒子不要给高度

align-content：设置侧轴上的子元素的排列方式（多行）

用于子项出现换行的情况

属性值	说明
flex-start	侧轴头部开始排列（默认）
flex-end	侧轴尾部开始排列
center	侧轴中间显示
space-around	侧轴上平分剩余空间
space-between	侧轴上先分布在两边，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

！！

多行用align-content

单行用align-items

flex-flow

是flex-direction 和 flew-warp的复合属性

把设置主轴方向和是否换行（换列）简写。

flex-flow : row warp;

2.子项属性

flex属性：定义子项目分配剩余空间

用flew来表示占多少份数

.item{
     flex:<number>;
}

align-self：控制子项自己在侧轴上的排列方式

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items

默认为auto（继承父元素的align-end，没有父元素等同于stretch）

span:nth-child(n){
                 align-self: flex-end;
 
}

order：定义项目的排列项目

数值越小，排列越靠前（默认为0，与z-size不同）

 .item{
    order: <numder>;
   }

若想让某盒子提前显示，可改为order：-1。

三.rem适配布局

rem单位

定义：

rem是一个相对单位，基准是html元素的字体大小

优点：

很好的控制整个页面的元素大小

html{
font-size：10px;
}
div{
font-size：2rem;
}

根HTML大小为12px，此时div字体大小为2*12=24px。

技术方案1：less+媒体查询+rem

1.假设把屏幕分成若干等分（15/20/10/...）

2.每一份作为HTML字体大小（屏幕大小/份数）

3.页面元素大小利用rem单位与媒体查询，不同屏幕下页面元素可等比例缩放

<style>
    @media screen and (min-width: 320px) {
        html {
            font-size: 21px;
            /* 320/15 */
        }
    }

    @media screen and (min-width:500px) {
        html {
            font-size: 51px;
            /* 500/15 */
        }

    }
</style>
</head>

<body>
    <div>
        666
    </div>
</body>

技术方案2：flexible.js+rem(简单)

原理：把当前设备划分为10份

1.我们要确定当前设备的HTML文字大小，不需要写不同屏幕下的媒体查询

比如当前设计稿为750px，我们需要把html文字大小设置为75px（750/10），用rem写页面元素即可

四.响应式布局

响应式开发

原理：

使用媒体查询针对不同宽度的设备进行布局和样式的设置

响应式布局容器：

需要一个父级作为布局容器，配合子级来实现变化效果。

通过媒体查询来改变布局容器的大小，再改变子元素的排列方式。

Bootstrap

定义：

目前最受欢迎的前端框架，有一套比较完整的网页功能解决方案，而且控制权再框架本身，

有预制样式库,组件和插件。使用者要按照框架所规定的某种规范进行开发。

使用：

1.创建文件夹结构

2.创建html骨架结构

3.引入相关样式文件

4.书写内容

bootstrap栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

	超小屏幕 <768px	小屏设备 >=768px	中等屏幕 >=992px	宽屏设备 >=1200px
.container最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	,col-md-	.col-lg-

超小屏幕

<768px

小屏设备

>=768px

中等屏幕

>=992px

宽屏设备

>=1200px

.container最大宽度

自动（100%）

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

,col-md-

.col-lg-

列数（column） 12

按照不同屏幕划分为1-12等份

row可以去除父容器作用15px的边距

xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大。

列（column）大于12，多余的所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的padding

  <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
    </div>

栅格系统列嵌套

一个列内再分成若干份小列可以通过添加一个新的.row 元素和一系列.col - sm -元素到已经存在的.col - sm -元素内。

<!-﹣列嵌套﹣->
< div class =" col - sm -4">
       < div class =" row ">
          < div class =" col - sm -6"＞小列＜/ div >
          < div class =" col - sm -6"＞小列＜/ div >
       </ div >
</ div >

栅格系统列偏移

使用．col - md - offset -类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（ margin )。

<!--列偏移-->
< div class =" row ">
   < div class =" col - lg -4">1</ div >
   < div class =" col - lg -4  col - lg - offset -4">2</ div >
</ div >

栅格系统列排序

通过使用．col - md - push -和．col - md - pull -类就可以很容易的改变列（ column ）的顺序。

<!--列排序-->
< div class =" row ">
    < div class =" col - lg -4 col - lg - push -8"＞左侧＜/ div >
    < div class =" col - lg -8 col - lg - pull -4"＞右侧＜/ div >
</ div >