移动端rem页面详谈
rem布局是移动端常见的布局之一,也是较为成熟的方案。接下来就详细说以下rem布局的实际操作。
1.首先加<meta />标签,设置视口的大小,不多说。
<meta name="viewport" content="width=device-width initial-scale=1" />
2给html设置字体大小 ,设置为font-size;20px;
3添加一段js 动态控制根节点字体的大小
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
4 将psd图大小缩放,宽为320px;这个值也不是固定的,但要与上面js中的数值相一致。
5此时,根节点的字体大小为20px;只要将所测量的尺寸除以20加单位rem就可以了。
移动端rem页面详谈的更多相关文章
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- 移动端rem计算
教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872 版权声明:本文为博主原创文章,未经博主允许不得转载. h ...
- 3分钟读懂移动端rem使用方法
1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! ...
- vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
随机推荐
- 基于params,ref,out的参数问题详解
http://www.jb51.net/article/37967.htm 最近在写程序时遇到params,ref,out 参数问题.回头有自习看了看MSDN,才巩固了基础.现在和大家分享一下.par ...
- 优化Select 语句的原则
优化Select 语句的原则 -摘抄<SQL Server 2005 性能监测与优化> Select 语句是数据库应用系统中最常用的语句之一,Select 语句设计的好坏直接影响到应用程序 ...
- 【MySQL】锁入门
要做的完全掌握MySQL/InnoDB的加锁规则,甚至是其他任何数据库的加锁规则,需要具备以下的一些知识点 了解数据库的一些基本理论知识:数据的存储格式 (堆组织表 vs 聚簇索引表):并发控制协议 ...
- Python的第一天
一.Python的简介 Python诞生于作者是Guido van Rossum,Python来自Guido所挚爱的电视剧Monty Python's Flying Circus (BBC1960-1 ...
- jQuery选择器大全
1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { $('#one ...
- python 获取当前目录下文件(转)
今天继续整理原来写的 python 代码,下面是获取文件信息的 python 处理代码. 获取指定目录下文件的文件名以及文件的数量,然后列出其中还存在的目录名称: #!/usr/bin/env pyt ...
- PL/SQLDeveloper导入导出Oracle数据库方法
前一篇博客介绍了Navicat工具备份Oracle的方法,这篇博客介绍一下使用PL/SQL Developer工具导入导出Oracle数据库的方法. PL/SQL Developer是Oracle数据 ...
- 基于Material Design(转载)
SeeNewsV2新闻Android客户端 基于Material Design http://www.codesocang.com/gn/xiangmu/33630.html 直接拿来用!十大Mate ...
- javascript匿名函数应用
1.给指定对象新增一些属性的写法: /*给一个对象增加属性*/ var myDate=(function(obj){ obj.addName=function(name){ this.name=nam ...
- SQL Server查询分组结果中第一条记录的方法
select * from ( select mp.MsgID,m.Content,m.CreatorID,m.CreateTime,ROW_NUMBER() over(partition by m ...