移动端web页面如何适配,现有两个方案:

1 设置viewport进行缩放

简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况。天猫的web app的首页使用这种方案

在页面中加入viewport.js

var doc = window.document,
docEle = doc.documentElement,
dpr = Math.ceil(window.devicePixelRatio),
vp = document.querySelector('meta[name="viewport"]'),
docWidth = docEle.clientWidth,
r = docWidth / 375;
vp.setAttribute('content', 'width=375,initial-scale=' + r + ',maximum-scale=' + r * dpr + ', minimum-scale=' + r / dpr + ',user-scalable=no');

2 rem能等比例适配所有屏幕

rem是通过根元素进行适配的,网页中的根元素指的是html。我们通过设置html的字体大小就可以控制rem的大小。

在页面中加入common.js

var dpr, rem, scale;

var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
var docEl = document.documentElement;
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth / 10;
scale = 1 / dpr; // 设置viewport,进行缩放,达到高清效果
//metaEl.setAttribute('content', 'width=' + dpr * rem + ',initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no'); // 设置data-dpr属性,留作的css hack之用
docEl.setAttribute('data-dpr', dpr); // 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px;}'; // 给js调用的,某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
}; window.dpr = dpr;
window.rem = rem;

====================计算相应的rem值=方法============================================

1通过sass,定义函数计算rem

$baseFontSize:      64px !default;
$gray: #cccccc !default; // pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
} body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(30px);
color:darken($gray,10%);
}

编译后的css

body {
font-size: 64px;
color: #e6e6e6; } .test {
font-size: 0.46875rem;
color: #b3b3b3; } /*# sourceMappingURL=test.css.map */

2通过工具计算

点击:  px转rem工具

该工具的用法:

输入自己页面的html font size,上传自己的css代码,然后下载css,就可以了。

---------------------------参考------------------------------------------

rem单位详细讲解 :  webapp变革之rem

学习sass:   sass语法

sass 编译工具:koala   koala使用教程

移动端web页面如何适配的更多相关文章

  1. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  2. 常见的移动端Web页面问题

    移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...

  3. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  4. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  5. 移动端web页面滚动不流畅,卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...

  6. [转]移动端web页面使用字体的思考

    一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿 ...

  7. web页面的适配问题

    一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦. 其实解决电脑与手机的适配问题,一般有两个思路:一个是做判断,根据不同条件在css和js做 ...

  8. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  9. 移动端Web页面适配方案

    概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度  windw.innerWidth/Height layout viewport 布局视口,DOM宽度 doc ...

随机推荐

  1. Customizing the Editor

    Use the General, Text Editor, Options Dialog Box to customize the appearance and functionality of th ...

  2. JMeter之JDBC接口测试

    使用jmeter连接数据库后,即可在jmeter中构造对数据库进行增删改查的请求以对数据库进行测试,以下以mysql数据库为例,演示jmeter连接mysql并进程查询操作的步骤. 1.确保mysql ...

  3. EntityFramework code first 一些常用的约束特性

    参阅: https://msdn.microsoft.com/zh-cn/data/jj591583 1. 主键 public class Test { //名称为 ID 的属性会自动映射为主键(自增 ...

  4. play for scala 通过网易smtp发送邮件

    最近用play来做一个小项目,里面用到了发送邮件的功能.这里我将这部分抽出来分享,毕竟目前来看paly于scala方面的中文资料在网上还是毕竟少,希望我的这篇文章能为有需要的人提供一点思路. 下面写下 ...

  5. angularJs实现信息数据提交功能

    如下简单的报名提交的实现 1.数据绑定 2.$http.post()提交数据 一.数据绑定 <!--报名部分--> <div class="attend_box" ...

  6. Altium Designer 文档信息设置以及模板制作

    原理图文档模板制作方法一.在DXP原理图设计环境下,新建一个自由原理图文档.单击:文件→新建→原理图,或者使用快捷键Ctrl+N打开Files资源面板,在“新建”项目下的选择“Schematic Sh ...

  7. Maven-004-使用 Nexus 搭建 maven 私服

    从去年至今,自己一直在学习自动化测试工具,想利用自动化工具尽可能的将重复的.关键的.耗时耗力的工作实现自动化,减轻日常测试工作,提升测试效率.在学习的过程中,将 maven 作为了项目开发管理工具,进 ...

  8. Win8.1密钥

    Win8.1 在线永久激活密钥一枚!  78BHN-M3KRH-PCP9W-HQJYR-Q9KHD [剩余次数:7K多+] 继续增加 [Key]:HPCJW-VGYW4-CR7W2-JG6Q7-K4Q ...

  9. svn的差异查看器和合并工具换成BCompare.exe

    svn的差异查看器和合并工具换成BCompare.exe

  10. java-EL

    语法 ¥{} 运算符 算数 加+.减-.乘*.除/.模% 比较 大于>.小于<.等于==.不等于!=.empty(判断是否为空,空位true,非空为false)(null 未实例化,&qu ...