1.移动设备 手机和ipad
系统:安卓系统、ios系统
安卓系统:内置浏览器是谷歌
ios系统:内置Safari浏览器,他们的内核是webkit,不考虑兼容性,需要考虑的是安卓和ios的区别
2.布局
布局考虑:
设备的实际大小,设备的分辨率,厂家(设计者)给的分辨率
页面的大小,设计稿上的大小(设计稿上的大小是多大,开发的页面大小就是多大)
浏览器的视口,浏览器自带的document.documentElement.clientWidth,在移动设备上如果不做处理查看一般默认是980
eg:设备宽是320px,页面宽是1200px,浏览器视口是980px,三者统一,我们用移动设备看页面,页面的视口会自动缩小,以100%完整的展示页面,但是就会变得不清楚,特别挤,视觉效果极差
解决:
需要把这三个变得统一
(1)移动设备(320)和浏览器视口(980)一致,在head之间加一个meta标签 name=“viewport”
<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />
移动设备宽度和浏览器视口一致时,如果页面宽度大于整个数字,就会出现滚动条
(2)当移动设备和浏览器视口一致时,如果还使用以前的布局,如果页面超过设备宽,超过的部分会被截掉,使用不能使用传统的开发模式了
简单介绍一下弹性布局
(1)分两部分:弹性父级、弹性子元素
(2)给父级设置 display:flex或者inline-flex
flex-direction 属性指定了弹性盒子元素在父容器中的位置
flex-direction的属性值
row 横向从左到右排列(左对齐),默认的排列方式
row-reverse 反向横向排列(右对齐)从后往前排,最后一项排在最前面
column 纵向排列
column-reverse 反转纵向排列,从后往前排,最后一项拍在最上面