移动端页面适配

关键词：

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

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");
});

移动端页面适配，rem布局

移动端页面适配 em根据元素自身的字体大小来计算自己的尺寸remrootem根据根节点(html)的字体大小来计算自己的尺寸                  适配:各个移动设备，分辨率... 查看详情

pc端移动端页面适配方案(代码片段)

...m/huanzi-qch/p/12053799.html 　　前言　　页面自适应PC端、移动端大体上可以分为两种：　　1、在同一个页面进行自适应布局，通常使用CSS3 @media 媒体查询器实现　　2、两套页面，在后端进行统一适配，根据不同的浏览器... 查看详情

关于移动端页面的适配

移动端页面：    适配，适应各个不同的设备，如果是纯粹的移动端页面的话不用去考虑ipad,PC。    浏览器，微信（朋友圈），QQ(内置浏览器)，UC    小米，华为会有部分兼容问题。响... 查看详情

淘宝——移动端页面终端适配

...适配中背景图片的处理适配的原理解析 摘要：在进行移动端界面的书写的时候，如果把宽度高度或者字体大小全部写死的话，那么在所有手机上看到的大小都一样，存在的问题就是同样大小的字体，或者一个盒子模型，在大... 查看详情

移动端页面适配---rem

(function(doc,win){vardocEl=doc.documentElement,resizeEvt=‘orientationchange‘inwindow?‘orientationchange‘:‘resize‘,recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;if(clientWi 查看详情

移动端适配的总结(代码片段)

说起移动端页面也是老生常谈了，最近正好在做金融商城移动端的开发，正好梳理下这一块的知识点，提炼和总结。一 什么是移动端页面  首先  不扯那些长篇大论，常见的移动端页面主要就三种，即H5页面、... 查看详情

移动端页面的适配

　　不进行任何配置，把网页直接放在移动端打开会有严重的缩小页面问题，通常我们可以在head标签中加入以下代码就可以解决：　<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=no"/> 查看详情

移动端页面适配

前端开发中，尤其移动端手机屏幕大小各异，该如何解决页面适配的问题呢？下面从几点进行了总结。1、设计稿的布局设计　　我们在进行H5页面内容规划布局设计的时候，不能把重要的内容放在太偏下的位置或者偏上，否则前... 查看详情

移动端页面适配问题

移动端页面满屏自适应方案（采用rem作为单位，设计稿为750*1334）修改自阿里的lib-flexible，与lib-flexible相比，删除了dpr，保留rem满屏自适应，要求设计稿为750*1334单位换算为1rem=50px        代码引入：&l... 查看详情

再聊移动端页面的适配(代码片段)

  再聊移动端页面的适配https://www.w3cplus.com/css/vw-for-layout.html 原文网址Flexible承载的使命Flexible到今天也有几年的历史了，解救了很多同学针对于H5页面布局的适配问题。而这套方案也相对而言是一个较为成熟的方案。... 查看详情

基于rem的移动端响应式适配方案(详解)移动端h5页面的设计稿尺寸大小规范

基于rem的移动端响应式适配方案(详解)：　　https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范　　http://www.tuyiyi.com/v/53039.html 查看详情

移动端页面使用rem来做适配

移动端页面使用rem来做适配rem介绍rem（fontsizeoftherootelement）是指相对于根元素（即html元素）的字体大小的单位。假设根元素的字体大小是10px,则5rem的大小为 5*10=50px,例如1html{2font-size:10px;3}4width:2rem;/*2*10=20px;*/5margin:1rem;6}7img{8wi... 查看详情

rem,vw,还是...?各凭本事的移动端适配方案(代码片段)

...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情

移动端h5页面适配问题研究

参考技术A刚开始做移动端web开发的同学应该都碰到过页面适配问题，为什么我在开发手机上调试好的页面在其他手机会有这样或那样的样式问题？viewport我也设置了，为什么还是显示不正常？难道我要为每种手机屏幕写媒体查询... 查看详情

移动端页面利用好viewport，适配各种宽度屏幕(代码片段)

最近研究微贷网的移动端代码，发现他们网站在适配不同宽度屏幕的显示情况时，发现他们并不是利用rem单位，而是利用js动态设置mete的viewport来达到适配的效果。感觉挺不错的，也不需要计算什么东西，单位继续用px.代码分享... 查看详情

rem实现移动端适配(代码片段)

移动端适配web页面跑在手机端（h5页面）跨平台基于webview（）基于webkit常见适配方法pc端采用display：inline-block，让div盒子横着排移动web：采用定高，宽度百分比，flex弹性布局，meDIAQUERY媒体查询；媒体查询结合css，通过媒体类型... 查看详情

移动端页面适配ipad？(代码片段)

1、 @custom-media --sm (min-width: 576px);@custom-media --md (min-width: 768px);@custom-media --lg (min-width: 992px);@custom-media --xl (min 查看详情

移动端适配剖析(代码片段)

...屏幕分辨率等不一致，导致页面显示不一致，如下是部分移动端设备的一些参数，更多尺寸看 这里2.移动端适配的目标是在不同尺寸的手机设备上，页面相对性的达到合理的展示或者保持统一效果的等比缩放(看起来差不多)&n... 查看详情