初学移动端

Posted 2021-12-02 jialaoshizaixianjiaoxue

1. 移动布局
   1. 　　移动设备 手机 和ipad
   2. 　　安卓系统 ios系统
   3. 　　安卓系统 内置浏览器是谷歌  ios内置 safari浏览器 他们的内核都是webkit，不考虑兼容性，需要考虑的是安卓和ios的区别。
2. 布局
1. 　　设备宽度  设备的实际大小 设备的分辨率 厂家给的
2. 　　页面的大小  设计稿上的大小
3. 　　浏览器的视口 浏览器自带的用document.documentElement.clientWidth查看，在移动设备上如果不做视口处理一般默认是980。
4. 　 例子 设备宽是320 页面宽是1200 浏览器视口是 980px 三种不统一，我们用移动设备看页面，浏览器的视口会自动缩小，以100%完整展示页面，就会变的不清楚，特别挤。我们需要把这三个变的统一。　  
5. 　　移动设备宽（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" />

6. 设备宽度和浏览器视口一致时 如果页面宽大于这个数字，就会出现滚动条。

7. 当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉。不能使用传统的页面开发模式了。