移动端布局1

1 找到电脑的Ip地址  :打开命令行  Ipconfig

2 找到Ip后 复制 覆盖文件前面的地址

3 二维码生成器  填上地址

4 像素:

    设备独立像素:手机的真实大小  window.screen.width/height   在模拟器中会变   在真实手机中不会变  

                          一个点会有多个像素    可以被修改

  设备像素: 物理像素   买手机时厂家告诉你的分辨率   是虚拟值  无法获取

  像素比:  dpi   无法修改  window.devicePixelRatio

               ppi   每英寸  能显示的像素数量    越大越清晰

5 viewport

   userscable   能否缩放

   <meta name="viewport" content="width=device-width,user-scalable=no">

   用了缩放后,并不是真正的缩放了,而是改变了屏幕的尺寸(设备的独立像素)

6 

在手机中显示的是  :750*dpi

7 示例的网址:http://apeclass.cn/shows/html5-first/index.html#   rem布局

  http://apeclass.cn/shows/html5-sec/index.html  手机端固定定位

8比例缩放适配

   

原来的尺寸: currWidth:  window.screen.width

想变成的尺寸:targetWidth:375

缩放比例:scale=currWidth/targetWidth

var meta=document.creatElement('meta');

meta.name='viewport';

meta.content="initial-scale"+scale;

document.head.appendChild(meta);

9  rem适配

var html=document.documentElement;

var width=html.getBoundingClientRect().width;

html.style.fontSize=width/16+'px';

iphone5下   1rem=320/16=20Px

如果4个div并列显示  每个的宽度是80px   所以最终是4rem

满屏是16rem

hbuilder自动转换工具

手机端会出现的问题:

1 overflow:hidden 在ios横屏下不起作用

2 固定定位

3 移动端样式重置