pc端(personal) computer 个人电脑 移动端 (方便移动端的设备) moblie phone (手机) pad iwatch kindle 耳机 只能眼睛(vr)
设备模拟器 :1.选择设备种类 2.设备的css像素 3.设备的观看比例 4.网络状态 5.横屏竖屏 6.截屏(当前屏幕长截屏)
针对iPhone型号研究
iPhone4 320*480 640*960 *2
ip5: 320*568 640*1136 *2
ip6,7,8 375*667 750*1334 *2
ip6.7.8s 414*736 1224*2208 *3
CSS像素比(dpr): css像素=物理像素(实际测量的像素)/像素比
CSS像素比(dpr): 2或者3
视口
布局视口: 整个页面的视口
视觉视口: 能看得见的视口
理想视口: 布局视口=视觉视口
minimum-scale:最小缩放比例
maximum-scale:最大缩放比例
initial-scale:初始缩放比例
user-scalable:no 禁止用户缩放
移动端布局步骤
1.确定设计稿大小
2.确定像素比
3.引入理想视口
4.引入icon图标
5.编写html结构
6.引入重置样式
css3多列属性
1.column-count: 用来设置分成的列数 n(正整数不带单位) 分成n列
2.column-gap:用来设置列和列之前的距离
3.column-rule:用来设置列与列之间的分割线(属性值类似边框)
4.column-width:用来设置列宽(会与列数起冲突)
5.column-span:横跨的列数 none不横跨(默认值) all横跨所有
6.column-fill:检索列的高度是否统一 auto(列的高度自适应,默认值) balance(列的高度由最大的那一列决定)
7.break-inside:avoid;用来设置某一列显示玩再到下一列.
