码迷,mamicode.com
首页 > 移动开发 > 详细

关于移动端--适配

时间:2017-06-27 01:06:37      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:dev   point   ice   一半   style   不同   边框   视图   实现   

1 为什么要适配?

     要实现等比;

默认情况等不等比?不加meta标签是等比的

加了meta标签就不等比了。

<metaname="viewport"content="width=device-width,

initial-scale=1.0,user-scalable=no"/>

2 rem适配的本质:rem参照根元素字体(html字体)

  不管视图多大,在不同的移动端机型上,1rem等于视图的宽度,所以,根标签的font-size改成布局视口的大小。

3 viewpoint适配的本质:UI给的320px图纸(页面),让所有设备的布局视口变为320px,动态改变initial-scale的比值。

4.rem适配

优点:可以使用理想标签,

   可以实现等比缩放

缺点:换算比较麻烦

    核心思想:基于rem

5.viewport适配

优点:避免复杂的计算,直接使用UI的标准像素值

缺点:不能使用理想视口

  图片失真情况很严重

6.1px像素(1物理像素)实现原理

让所有布局元素(div)都为rem单位,边框为px单位

让页面中所有元素都缩小一半,让布局(div)元素rem*2

这样 1px  css像素就变成了1px的物理像素.

关于移动端--适配

标签:dev   point   ice   一半   style   不同   边框   视图   实现   

原文地址:http://www.cnblogs.com/huifang/p/7083052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!