移动端特点
移动端与PC端的区别
- PC屏幕大，网页固定版心
- 移动端屏幕小， 网页宽度多数为100%
- 移动端无鼠标悬停样式:hover{}
移动端网页调试方法
- 谷歌模拟器
分辨率
-
物理分辨率
- 生产屏幕时就固定的，它是不可被改变的
-
逻辑分辨率
- 是由软件（驱动）决定的
- 制作移动端网页参考逻辑分辨率
视口
-
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
-
代码
-
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> -
viewport：视口
-
width=device-width：视口宽度 = 设备宽度
-
initial-scale=1.0：缩放1倍（不缩放）
-
maximum-scale=1.0：最大缩放比为1
-
minimum-scale=1.0：最小缩放比为1
-
user-scalable：禁止用户缩放
-
-
设置用户代码片段（添加视口标签方法）
- 点开VScode左下角齿轮，点击用户代码片段
- 在上面的输入框输入对应语言的代码片段（如果你想设置html的代码片段就输入html）
- ctrl+A全选 ctrl+v粘贴进去用户代码片段。保存即可
-
屏幕宽度：320~750 不包括ipad
-
不支持ctrl+滚轮放大或缩小
二倍图
-
为了高分辨率下图片不会模糊失真
- 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿
- 二倍图设计稿尺寸：750px
百分比布局（流式布局）
宽度自适应，高度固定
flex布局
设置方式
- 父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分
- 弹性容器（父元素）
- 弹性盒子（子元素）
- 主轴（水平）
- 侧轴 / 交叉轴（垂直）
布局特点
-
当父元素设置了弹性盒子模型后
- 所有的子元素会强制在一行上显示
- 子元素可以自由的设置宽度和高度
- 子元素默认宽度由内容撑开
- 子元素默认高度和父元素等高
主轴对齐方式 justify-content: 简写jc
-
flex-start
- 默认值, 左边起点开始依次排列
-
flex-end
- 右边终点开始依次排列
-
重要（必记）
-
center
-
居中
- 简写jcc
-
-
space-between
-
两端对齐剩下的盒子平分间隙
- 简写jcsb
-
-
space-around
- 间隙环绕每一个子元素
-
space-evenly
- 让所有的间隙都相同
-
侧轴对齐方式 align-items: （添加到弹性容器）
-
center
-
居中
- 简写aic
-
-
stretch
-
拉伸
- 默认值
-
-
flex-start
-
flex-end
-
align-self：
- 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
伸缩比
-
flex:值
-
取值分类
- 整数（不带任何单位）
- 百分比
-
注意 :
- 只占用父盒子剩余尺寸
-
实用
-
多个弹性盒子平分页面
- flex:1;
-
两侧弹性盒子固定，中间弹性盒子大小随页面拉伸而拉伸
.box{display:flex;}.left,.right{width:200px;hight:200px；}.center{flex:1;}
-
