移动端界面与响应式界面
- px、em、rem
- w3c盒模型和ie盒模型
- 移动端样式清除
- 视口设置
- 媒体查询
- 移动端常见布局
-
- 响应式布局
- 流式布局
- flex布局
- grid布局
- rem布局
px、em、rem
- 1 ÷ 父元素的font-size × 需要转换的像素值 = em
- Chrome浏览器默认字体大小是16px
px
1px为一个像素点
em
em相对是相对于父节点的字体大小的单位
<html>
<head>
<style>
.container{
font-size:10px;
}
span{
font-size:1.5em;
}
</style>
</head>
<body>
<div class="container">
<span>helloworld</span>
<!-- 15px -->
</div>
</body>
</html>
rem
rem是相对于根节点<html>的字体大小的一个单位
w3c盒模型和ie盒模型
box-sizing: content-box | border-box;
w3c 盒模型
height和width为内容的实际高度和宽度，不包含padding和border
即width=content
IE盒模型
height和width包含了padding和border
即width=content+padding+border
移动端样式清除
去除移动端点击背景的样式
a{
-webkit-tap-highlight-color:transparent;
}
去除iOS样式
input,button{
-webkit-appearance:none;
}
禁用长按弹出菜单
img,a{
-webkit-callout:none;
}
视口设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
| 字段 | 解释 |
|---|---|
| width=device-width | 设置视口宽度等于设备宽度 |
| initial-scale | 初始缩放倍数 |
| maximum-scale | 最大缩放倍数 |
| user-scalable | 是否允许用户缩放 |
媒体查询
设备类型
- all
- screen
- speech 用于屏幕阅读器
语法
@media语法监控设备
@media not|only mediatype and (expressions){
//css代码...
}
@import语法监控设备
@import url("./screen.css") screen;
style标签监控设备
<style media="mediatype and not|only (expressions)">
</style>
link标签监控设备
<link rel="stylesheet" href="file.css" media="mediatype and not|only (expressions)">
移动端常见布局
响应式布局
实现BootStrap的栅格类
网格配置
| <768px | ≥768px | ≥992px | ≥1200px | |
|---|---|---|---|---|
| 最大容器宽度 | auto | 750px | 970px | 1170px |
| 最大列宽 | auto | 60px | 78px | 95px |
| 间隙宽度 | 30px | 30px | 30px | 30px |
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
margin: 0 auto;
height: auto;
}
.fuild-container{
width: 100%;
height: auto;
}
.fuild-container .row{
padding: 0;
}
.row{
width: 100%;
height: auto;
padding: 0 15px;
box-sizing: border-box;
}
.row::after{
clear: both;
display: block;
content: "";
}
</style>
<style>
@media screen and (min-width:1200px){
.container{
width: 1170px;
}
.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1{
float: left;
height: auto;
}
.col-lg-12{
width: calc(100% / 12 * 12);}
.col-lg-11{
width: calc(100% / 12 * 11);}
.col-lg-10{
width: calc(100% / 12 * 10);}
.col-lg-9{
width: calc(100% / 12 * 9);}
.col-lg-8{
width: calc(100% / 12 * 8);}
.col-lg-7{
width: calc(100% / 12 * 7);}
.col-lg-6{
width: calc(100% / 12 * 6);}
.col-lg-5{
width: calc(100% / 12 * 5);}
.col-lg-4{
width: calc(100% / 12 * 4);}
.col-lg-3{
width: calc(100% / 12 * 3);}
.col-lg-2{
width: calc(100% / 12 * 2);}
.col-lg-1{
width: calc(100% / 12 * 1);}
.lg-hide{
display: none;}
}
@media screen and (min-width:992px) and (max-width:1200px){
.container{
width: 970px;
}
.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1{
float: left;
height: auto;
}
.col-md-12{
width: calc(100% / 12 * 12);}
.col-md-11{
width: calc(100% / 12 * 11);}
.col-md-10{
width: calc(100% / 12 * 10);}
.col-md-9{
width: calc(100% / 12 * 9);}
.col-md-8{
width: calc(100% / 12 * 8);}
.col-md-7{
width: calc(100% / 12 * 7);}
.col-md-6{
width: calc(100% / 12 * 6);}
.col-md-5{
width: calc(100% / 12 * 5);}
.col-md-4{
width: calc(100% / 12 * 4);}
.col-md-3{
width: calc(100% / 12 * 3);}
.col-md-2{
width: calc(100% / 12 * 2);}
.col-md-1{
width: calc(100% / 12 * 1);}
.md-hide{
display: none;}
}
@media screen and (min-width:768px) and (max-width:992px){
.container{
width: 750px;
}
.col-sm-12,.col-sm-11,.col-sm-10,.col-sm-9,.col-sm-8,.col-sm-7,.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1{
float: left;
height: auto;
}
.col-sm-12{
width: calc(100% / 12 * 12);}
.col-sm-11{
width: calc(100% / 12 * 11);}
.col-sm-10{
width: calc(100% / 12 * 10);}
.col-sm-9{
width: calc(100% / 12 * 9);}
.col-sm-8{
width: calc(100% / 12 * 8);}
.col-sm-7{
width: calc(100% / 12 * 7);}
.col-sm-6{
width: calc(100% / 12 * 6);}
.col-sm-5{
width: calc(100% / 12 * 5);}
.col-sm-4{
width: calc(100% / 12 * 4);}
.col-sm-3{
width: calc(100% / 12 * 3);}
.col-sm-2{
width: calc(100% / 12 * 2);}
.col-sm-1{
width: calc(100% / 12 * 1);}
.sm-hide{
display: none;}
}
@media screen and (max-width:768px){
.container{
width: auto;
}
.col-xs-12,.col-xs-11,.col-xs-10,.col-xs-9,.col-xs-8,.col-xs-7,.col-xs-6,.col-xs-5,.col-xs-4,.col-xs-3,.col-xs-2,.col-xs-1{
float: left;
height: auto;
}
.col-xs-12{
width: calc(100% / 12 * 12);}
.col-xs-11{
width: calc(100% / 12 * 11);}
.col-xs-10{
width: calc(100% / 12 * 10);}
.col-xs-9{
width: calc(100% / 12 * 9);}
.col-xs-8{
width: calc(100% / 12 * 8);}
.col-xs-7{
width: calc(100% / 12 * 7);}
.col-xs-6{
width: calc(100% / 12 * 6);}
.col-xs-5{
width: calc(100% / 12 * 5);}
.col-xs-4{
width: calc(100% / 12 * 4);}
.col-xs-3{
width: calc(100% / 12 * 3);}
.col-xs-2{
width: calc(100% / 12 * 2);}
.col-xs-1{
width: calc(100% / 12 * 1);}
.xs-hide{
display: none;}
.row{
padding: 0;}
}
</style>
</head>
<body>
<div class="fuild-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="background-color: red;">1</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="background-color: blue;">2</div>
</div>
</div>
</body>
</html>
流式布局
利用max-width和min-width进行伸缩，通过将父容器width设为100%。
flex布局
轴线概念 & flex-direction
主轴 交叉轴
默认情况下：横向的轴为主轴，纵向的轴为交叉轴
flex-directrion: row | column | row-reverse | column-reverse
row: 横向为主轴，纵向为交叉轴
column: 纵向为主轴，横向为交叉轴
row-reverse | column-reverse: 与普通规则相近，但内部盒子反向排布
默认情况下，flex布局会改变子元素尺寸
交叉轴方向的单位若未定义，则元素在交叉轴方向的长度会被拉伸至100%
当父元素尺寸小于子元素的尺寸和时，子元素会在交叉轴方向上溢出
flex-wrap & flex-flow
flex-wrap: wrap | no-wrap
该属性用于设定元素在主轴上排满时是否进行换行操作
flex-flow: row wrap
该属性为flex-directrion flex-wrap属性的简写属性
justify-content
该属性用于设置子元素在主轴上的对齐方式
| 属性名 | 对齐方式 |
|---|---|
| flex-start | 从主轴起始位置开始排列 |
| flex-end | 从主轴结束位置开始排列 |
| center | 所有元素在主轴中心依次排开 |
| space-around | 所有元素间隔排布，但第一个和最后一个元素到边框的距离是中间元素间距的1/2 |
| space-evenly | 所有元素间隔排布，主轴方向所有空隙相等 |
| space-between | 最左和最右侧的元素贴合左侧、右侧边框，中间的元素间距相等 |
align-items & align-content
align-items和align-content属性用于控制元素在交叉轴上的对齐方式
| align-items属性名 | 对齐方式 |
|---|---|
| flex-start | 从交叉轴起始位置开始排列 |
| flex-end | 从交叉轴结束位置开始排列 |
| baseline | 以子元素基线为准对齐 |
| center | 位于容器的中心 |
| stretch | 元素被拉伸以适应容器 |
| align-content属性名 | 对齐方式 |
|---|---|
| flex-start | 从交叉轴起始位置开始排列 |
| flex-end | 从交叉轴结束位置开始排列 |
| center | 位于容器的中心 |
| stretch | 元素被拉伸以适应容器 |
| space-around | 所有元素间隔排布，但第一个和最后一个元素到边框的距离是中间元素间距的1/2 |
| space-evenly | 所有元素间隔排布，主轴方向所有空隙相等 |
| space-between | 最左和最右侧的元素贴合左侧、右侧边框，中间的元素间距相等 |
align-items适用于所有的flex容器
align-content只适用于单行，有多行元素时，设置align-content会将所有元素看做一个整体进行对齐，类似于justify-content
align-self
和align-items和align-content不同的是，align-self只针对操作对象进行对齐操作，而前两者是将整个行或列进行对齐操作
flex-grow & flex-shrink & flex-basis & flex & order
flex-grow 属性用于分配元素在主轴上的剩余空间，默认值为0
将flex-grow的数值设为n，已设置flex-grow的元素的flex-grow值的总和m。则设置了flex-grow属性的元素（flex-grow≠0）会被添加n/m倍剩余空间的宽度
当所有flex项的flex-grow属性值之和小于1时，m为1
flex-shrink 属性用于设定子元素总宽度大于父元素主轴宽度时的收缩系数，默认值为1
flex-shrink用于设置元素的收缩系数，每个元素收缩的权重为flex-shrink*width/总权重。
实际收缩宽度=(flex-shrink*width/总权重)*width
当所有flex项的flex-shrink属性值之和小于1时，只收缩溢出空间的一部分，即实际收缩宽度=溢出空间宽度*flex-shrink之和*权重
flex-basis 属性设置了元素占据主轴的空间
flex-basis可以设置为具体的css尺寸值，也可以设置为占据父元素的百分比，默认值为auto
flex-basis值受min-width和max-width的影响
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
flex:1 => flex:1 1 0%
order 属性决定弹性元素的排列顺序，数字越小，越靠前
grid布局
创建Grid容器
display: grid | inline-grid
属性用于将容器指定为块级/内联的网格布局元素
grid-template-rows & grid-template-columns
该元素用于定义网格布局的行和列
display:flex;
width:300px;
height:300px;
grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px;
//将会创建一个九宫格布局
除了绝对单位，也可以使用百分比
auto
属性可以接收auto关键字，表示长度将由浏览器决定（自动适配）
width:500px;height:300px;display:grid;grid-template-columns:100px auto 100px;//此操作将会创建一个三列的，两侧为100px中间为200px的栅格布局
repeat()
repeat()函数可以定义简化重复的值
grid-template-columns:100px 100px 100px 100px;//简化后grid-template-columns:repeat(4,100px);
auto-fill
有时，单元格的大小是固定的，而容器的大小是不固定的。如果希望每一行/列容纳尽可能多的元素，可以使用auto-fill关键字进行填充。将会自动填充，直到容器不能放置更多的列
grid-template-columns:repeat(auto-fill,100px);
fr
fr关键字用于表示单元格的比例关系。如果两列的宽度为1fr和2fr，则后者宽度为前者的2倍
grid-template-columns:1fr 2fr 3fr;//将创建一个列宽度比例为1:2:3的栅格布局
minmax()
minmax()函数产生一个长度范围，表示长度就在这个范围之中。
grid-template-columns:minmax(100px,200px) minmax(100px,200px);
网格线的名称
在grid-template-columns和grid-template-rows属性中，可以使用方括号指定每一根网格线的名字，方便以后的引用
grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
每条网格线可以有多个名字
grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end];
repeat()函数也可以对网格线进行命名
grid-template-columns:repeat(3,[c-start] 1fr [c-end]);grid-column:c-start 1 / c-end 3;
grid-template
grid-template属性为grid-template-rows和grid-template-columns属性的简写属性
grid-template:repeat(3,100px) / repeat(2,10px);
//等价于
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(2,100px);
row-gap &column-gap & gap
row-gap和column-gap属性用于设置行列之间的间距
使用fr为单位的栅格时，设置间距后会自动调整栅格的尺寸，不会导致子元素溢出父元素
而使用px等绝对单位时，设置间距后若子元素总宽度超过父容器宽度，则会导致子元素部分溢出父容器
gap属性为row-gap和column-gap属性的简写属性
gap: <row-gap> <column-gap>;
若gap属性省略第二个值，则第二个值默认等于第一个值
grid-column-start & grid-column-end & grid-row-start & grid-row-end
该属性用于定义子元素的四个边框，分别定位在哪个网格线
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
简写属性 grid-column & grid-row
grid-column 和 grid-row 属性为上列属性的简写属性
grid-column-start:2;grid-column-end:3;//等价于grid-column:2 / 3;
简写属性的span关键字
简写属性grid-column 和 grid-row 属性中，可以使用span关键字，表示跨越多少个网格
grid-column-start:1;grid-column-end:4;//等价于grid-column:1 / 4;//等价于grid-column:span 4;//等价于grid-column-end:span 4;
上面的例子中，忽略了属性的第一个参数而直接将第二个参数定义为span 4，这表示默认将从第一条线开始跨越
当仅指定了grid-*-end属性采用span关键字进行跨越时，该情况与grid-*关键字相同
grid-column-start:2;grid-column-end:4;//等价于grid-column:2 / 4;//等价于grid-column:2 / span ;
而该例子中明确地指定了第一条线的序号，则按照规则进行跨越
若当前行剩余的格子不足，无法进行跨越，浏览器将会自动将该格子移动到下一行
grid-area
该属性指定项目放在哪一个区域，可以使用grid-template-areas属性定义的名称。
.container{
display:grid; grid-template-areas:'a b c' 'd e f';}.item{
grid-area:e;}
可以作为grid-column-start grid-column-end grid-row-start grid-row-end属性的合并简写形式，直接指定项目的位置
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-template-areas
grid-template-areas属性用于定义区域
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。
多个单元格合并成一个区域的写法如下。
grid-template-areas: 'a a a'
'b b b'
'c c c';
上面代码将9个单元格分成a、b、c三个区域。
如果某些区域不需要利用，则使用"点"（.）表示。
grid-template-areas: 'a . c'
'd . f'
'g . i';
上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。
注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为
区域名-start，终止网格线自动命名为区域名-end。比如，区域名为
header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。
justify-content & align-content & place-content
justify-content属性用于设置整体内容在容器中的水平位置，align-content属性用于设置整体内容在容器中的垂直位置
justify-content: start | end | center | stretch | space-around | space-evenly | space-between;align-content: start | end | center | stretch | space-around | space-evenly | space-between;
place-content属性是justify-content和align-content属性的简写形式
place-content:<align-content> <justify-content>;
如果省略第二个值，浏览器就会假定第二个值等于第一个值
justify-items & align-items & place-items
justify-items属性用于设置单元格内容的水平位置，align-items属性用于设置单元格内容的垂直位置
justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
place-items属性是justify-items和align-items属性的简写形式
place-items:<align-items> <justify-items>;
如果省略第二个值，浏览器就会假定第二个值等于第一个值
grid-auto-flow
grid-auto-flow属性控制着自动布局算法运作方式，精确指定在网格中被自动布局的元素怎样排列。默认顺序是“先行后列”，即先填满第一行，再开始放入第二行。默认值是row
grid-auto-flow: row | column | row dense | column dense;
- row 默认
- column 垂直排列
- dense 密度填充
当某些元素换行产生空位时，使用dense可以将符合大小的元素填入到空位中，按照最大密度排列
rem布局
max-width & max-device-width
max-width针对浏览器可见区域宽度，max-device-width针对设备显示宽度
移动端浏览器宽度通常等于设备宽度，所以移动端适配可用max-device-width
而在开发响应式页面时，推荐使用max-device-width
在不同尺寸的设备中，使用媒体响应控制页面根节点的字体大小，实现rem布局
rem实际开发适配方案
- 按照设计搞与设备宽度的比例，动态计算并设置html跟标签的font-size大小；（媒体查询）
- CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。
屏幕尺寸不同，通常设置不同的字体大小
- iPhone 4 5 640px
- iPhone 6 7 8 750px
- Android常见 320px 360px 375px 384px 400px 414px 424px 480px 500px 540px 720px 750px
动态设置html标签font-size大小及页面元素取值
-
假设设计稿是750px
-
假设把整个屏幕划分为15等分（划分标准不一定可以是20份也可以是10等份）
-
每一份作为html字体大小，即750/15=50px，在320px设备的下，字体大小为320/15=21.33px
页面元素取值
- 页面元素的rem值=页面元素在750像素下的px值 / html里面的文字大小
示例代码
此示例代码中，将页面等分为15份
@media all and (max-width:320px){
html{
font-size: 21.33px;
}
}
@media all and (min-width:321px) and (max-width:360px){
html{
font-size: 24px;
}
}
@media all and (min-width:361px) and (max-width:375px){
html{
font-size: 25px;
}
}
@media all and (min-width:376px) and (max-width:384px){
html{
font-size: 25.6px;
}
}
@media all and (min-width:385px) and (max-width:400px){
html{
font-size: 26.66px;
}
}
@media all and (min-width:401px) and (max-width:414px){
html{
font-size: 27.6px;
}
}
@media all and (min-width:415px) and (max-width:424px){
html{
font-size: 28.27px;
}
}
@media all and (min-width:425px) and (max-width:480px){
html{
font-size: 32px;
}
}
@media all and (min-width:481px) and (max-width:500px){
html{
font-size: 33.33px;
}
}
@media all and (min-width:501px) and (max-width:540px){
html{
font-size: 36px;
}
}
@media all and (min-width:541px) and (max-width:640px){
html{
font-size: 42.67px;
}
}
@media all and (min-width:641px) and (max-width:720px){
html{
font-size: 48px;
}
}
@media all and (min-width:721px){
html{
font-size: 50px;
}
}
rem适配方案技术使用
方案一
- less
- 媒体查询
- rem
方案二（推荐，更简单）
- flexible.js
- rem
flexible.js
flexible.js自动将屏幕划分为10等分