移动端布局

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 反转纵向排列,从后往前排,最后一项拍在最上面

 

  

移动端布局

上一篇:灵异事件之:Android Studio 3.4提示:Error running app: Default Activity Not Found


下一篇:python 虚拟环境virtualenvwrapper