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

移动端页面适配

时间:2016-10-26 14:10:02      阅读:2290      评论:0      收藏:0      [点我收藏+]

标签:size   16px   计算   color   状态   手机   class   情况   解决方案   

前端开发中,尤其移动端手机屏幕大小各异,该如何解决页面适配的问题呢?下面从几点进行了总结。

1、设计稿的布局设计

  我们在进行H5页面内容规划布局设计的时候,不能把重要的内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况。

除去将浏览器全屏显示的情况,几乎所有的情况都会有顶部的状态栏和导航栏。

  iphone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px。

  由于安卓系统可以更改状态栏和导航栏的高度,这里可以取默认值为48px和100px。

  那么就会把网页内容往下挤,进入盲区(根据不同的布局方式可能挤出视口,即可视区域之下)取这两个系统者的最大值为148,设计稿要尽量保证单页下面148px没有重要内容。

  那么在所有屏幕大小上把重要内容显示完全,就要注意市面上存在的小尺寸手机屏幕,现在绝大部分智能手机分辨率都在640*960px(iphone4分辨率)之上,所以只要把重要内容放在盲区之上即可,计算后的最安全高度为812(960-148=812)。

  在此总结,一般情况下,以现有市场上流行的移动智能手机,单页翻转(非延伸向下的长页面)设计稿尺寸为640*1136,在高度为812处设置一条安全线(参考线),将重要的内容布局在这条安全线之上。

2、相对单位rem的使用

   手机页面设计一般的大小是640,但是手机屏幕大小不确定,那么怎样才能做出适应所有手机的手机页面呢?

  一般的解决方案有两种,rem布局和百分比布局,我更推荐用rem布局来制作手机页面

  rem布局的兼容性:

  Mozilla Firefox 3.6+ ,Apple Safari 5+,Google Chrome ,IE9+和Opera11+

  IE6-8还是别用rem了,不过在手机端,可以忽略ie内核这个问题。

  rem的计算公式

  例:html设置font-size:16px ,1rem=16px

  最核心的代码就是这一段js运算了,根据页面的大小来控制基础rem的值,以下代码基于jquery:

  

var windowW = $(window).width();
var ratio = windowW/640;
$("html").css("fontSize",100*ratio+"px");
$(window).on("resize",function(){
    var windowW = $(window).width();
    var ratio = windowW/640;
    $("html").css("fontSize",100*ratio+"px");
});

  

  

移动端页面适配

标签:size   16px   计算   color   状态   手机   class   情况   解决方案   

原文地址:http://www.cnblogs.com/sherry-long/p/5999791.html

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