移动端web页面如何适配
移动端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语法
移动端web页面如何适配的更多相关文章
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- 常见的移动端Web页面问题
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 移动端web页面开发常用的头部标签设置
在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...
- 移动端web页面滚动不流畅,卡顿闪烁解决方案
移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...
- [转]移动端web页面使用字体的思考
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿 ...
- web页面的适配问题
一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦. 其实解决电脑与手机的适配问题,一般有两个思路:一个是做判断,根据不同条件在css和js做 ...
- 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- 移动端Web页面适配方案
概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度 windw.innerWidth/Height layout viewport 布局视口,DOM宽度 doc ...
随机推荐
- Customizing the Editor
Use the General, Text Editor, Options Dialog Box to customize the appearance and functionality of th ...
- JMeter之JDBC接口测试
使用jmeter连接数据库后,即可在jmeter中构造对数据库进行增删改查的请求以对数据库进行测试,以下以mysql数据库为例,演示jmeter连接mysql并进程查询操作的步骤. 1.确保mysql ...
- EntityFramework code first 一些常用的约束特性
参阅: https://msdn.microsoft.com/zh-cn/data/jj591583 1. 主键 public class Test { //名称为 ID 的属性会自动映射为主键(自增 ...
- play for scala 通过网易smtp发送邮件
最近用play来做一个小项目,里面用到了发送邮件的功能.这里我将这部分抽出来分享,毕竟目前来看paly于scala方面的中文资料在网上还是毕竟少,希望我的这篇文章能为有需要的人提供一点思路. 下面写下 ...
- angularJs实现信息数据提交功能
如下简单的报名提交的实现 1.数据绑定 2.$http.post()提交数据 一.数据绑定 <!--报名部分--> <div class="attend_box" ...
- Altium Designer 文档信息设置以及模板制作
原理图文档模板制作方法一.在DXP原理图设计环境下,新建一个自由原理图文档.单击:文件→新建→原理图,或者使用快捷键Ctrl+N打开Files资源面板,在“新建”项目下的选择“Schematic Sh ...
- Maven-004-使用 Nexus 搭建 maven 私服
从去年至今,自己一直在学习自动化测试工具,想利用自动化工具尽可能的将重复的.关键的.耗时耗力的工作实现自动化,减轻日常测试工作,提升测试效率.在学习的过程中,将 maven 作为了项目开发管理工具,进 ...
- Win8.1密钥
Win8.1 在线永久激活密钥一枚! 78BHN-M3KRH-PCP9W-HQJYR-Q9KHD [剩余次数:7K多+] 继续增加 [Key]:HPCJW-VGYW4-CR7W2-JG6Q7-K4Q ...
- svn的差异查看器和合并工具换成BCompare.exe
svn的差异查看器和合并工具换成BCompare.exe
- java-EL
语法 ¥{} 运算符 算数 加+.减-.乘*.除/.模% 比较 大于>.小于<.等于==.不等于!=.empty(判断是否为空,空位true,非空为false)(null 未实例化,&qu ...