pc端 c3多列属性

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;用来设置某一列显示玩再到下一列.