web移动端
视口
- 视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 二倍图
实际大小 / 2
- 流式布局:使用
百分比%布局即可。(一般用于移动端，PC端不建议使用)
弹性布局
- 作用
基于flex精确灵活控制块级盒子的布局方式，避免 浮动布局中脱离文档流现象发生
- 设置方法
父元素添加
display:flex，子元素可以自动的挤压或者拉伸
主轴的对齐方式justify-content
侧轴的对齐方式 align-items
-
align-items(添加到父元素)align--self控制某个盒子在侧轴的对齐方式(添加到子元素自身)
使用
stretch拉伸需要把子元素高度去掉
-
伸缩比
-
flex:值;取值:整数;
圣杯布局:两边固定，中间自适应
flex:1;
改变主轴排列方向:flex-direction
改变容器换行
-
弹性盒子换行显示 :
flex-wrap: wrap; -
弹性盒子默认不换行，如要换行则使用以上属性
-
调整行对齐方式 ：
align-content -
取值与
justify-content基本相同
rem适配
能够使用
rem单位设置网页元素的尺寸
-
rem单位
-
相对单位
rem单位是相对于html标签的字号计算结果
1rem = 1html字号大小(chrome默认font-size:16px),则1rem = 16px
查看设计稿宽度 => 确定参考设备宽度 => 确定基准根字号(1/10)
rem单位的尺寸 = px单位数值 / 基准根字号
可使用
flexible.js手淘开发出的一个用来适配移动端的js框架/*rem可配合媒体查询使用 如iphone6/7/8宽度为375 用rem则375 / 10 = 37.5rem */ html{ font-size:16px } body{ width:18.75rem; /*300px则等于html px单位值 / 默认字体 300 / 16 == 18.75rem */ } /*宽度等于375px，则html字体为41.4px*/ @media(width:375px){ html{ font-size:41.4px; } } -
媒体查询
-
可配合最小宽度跟最大宽度使用
最小宽度
min-width最大宽度
max-width
@media (min-width:900px) and (max-width:1200px) {
html{
font-size:20px;
}
}
/*最小宽度900px,最大宽度1200px
当宽度大于900px并且小于1200px
则html字体为20px
*/
视口单位vw/vh
-
vw单位则是视口宽度
1vw = 1/100 视口宽度、或者说是(1%)
vh单位则是视口高度
1vh = 1/100 视口高度、或者说是(1%)
新出的单位：(取值也是1%)
vmin单位则是最小值
vmax单位则是最大值
ps：vw跟vh不建议一起使用
/*vw、vh案例*/
/*例如浏览器窗口宽度1400，窗口高度500*/
width:50vw;
height:50vw;
/*取宽度值，则宽高都为700*/
width:50vh;
height:50vh;
/*取高度值，则宽高为250*/
/*vmin、vmax案例*/
/*例如此时手机是竖屏:宽为414,高为500*/
width:50vmax;
height:50vmax;
/*则宽高都取最大值，宽高则都为250*/
width:50vmin;
height:50vmin;
/*则框高取最小值，宽高则都为207*/
来自Former
