移动端

移动布局

  1,移动设备 手机 和 ipad

    安卓和ios系统

    安卓系统      内置浏览器是谷歌ios内置safari浏览器他们的内核都是webkit,不考虑兼容性,需要考虑的是安卓和ios的区别

  2.布局

    设备宽度  设备的实际大小  设备的分辨率   厂家给的

    页面的大小    设计稿上的大小

    浏览器的视口    浏览器自带的用 document.documentElement.clientWidth  查看在移动设备上如果不做处理一般默认是980。

      

 

    例子 设备宽是320页面宽是1200浏览器视口是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.弹性布局

  1.分两部分  弹性父级  弹性子元素

  2.给父级设置display:flex或inline-flex

  flex-direction指定弹性盒子中子元素的排列方式

 

posted @ 2019-05-07 20:41  前端学习者6  阅读(209)  评论(0编辑  收藏  举报