关于rem布局
- 实际UI设计稿给过来为了在手机屏幕上显示清晰,设计稿通常为实际标准手机页面的2倍,一般为640px(以ip5的屏幕尺寸320px设计)或者750px(以ip6的屏幕尺寸为375px设计),这是前提。
- rem,即根元素字体大小,网页的根元素就是html,也就是html的字体大小。在初始设置css时为了后续的计算方便一般将根元素大小设置为10px或者20px。又因为浏览器最小字体限制12px,所以还要加一段代码:
html{
text-size-adjust:none;
-webkit-text-size-adjust:none;
font-size:10px;
}注:因为所有的浏览器默认字体大小都是16px,所以我们也可以设置html的fontsize为62.5% (10/16*100%);
- 这样,1rem对应的就是实际10px大小,所以如果此时我们在写样式,在浏览器上以ip5为模板展现的时候,从设计稿上量长宽时设计稿上测量的大小,首先要除以2(得到实际设计稿下的尺寸),再除以我们自己设置的根字节大小,就得到单位为rem的尺寸。
- 以上样式写好之后在浏览器尺寸为ip5上可以完整展现,但是如果此时换成其他尺寸的手机屏幕大小,就不能直接用这个数值展现(设计稿只对应ip5),加两步,将此时的rem根据屏幕的尺寸倍数变化自己
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<!--在移动端的发展过程中,早期的手机为了正常显示pc页面,手机默认的viewport的宽度并不是手机屏幕的宽度,一般默认的viewport宽度为980px,当然也有手机默认的宽度为1280px。这样如果你不把viewport的宽度设置为device-width的话,window.innerWidth就是默认值980px或者是1280px。这样我们上一段代码就有问题了。我们使用window.innerWidth获取的并不是屏幕的宽度。-->(function(){
var scale = window.innerWidth/320; //屏幕变化倍数
document.documentElement.style.fontSize = 10*scale+"px";//根字节变化倍数,实际的rem不用变
})()简写:
(function(win, doc) {
function change() {
doc.documentElement.style.fontSize = doc.documentElement.clientWidth * 20 / 750 + 'px';
}
change();
win.addEventListener('resize', change, false);
win.addEventListener('orientationchange', change, false); /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
})(window, document);
关于rem布局的更多相关文章
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- 手机端页面自适应之rem布局
W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...
- 手机端页面自适应解决方案-rem布局
rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...
- 手机端页面自适应解决方案—rem布局
只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...
- REM 布局
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- (淘宝无限适配)手机端rem布局详解(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- webapp,liveapp: 流式布局和rem布局
liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...
- 移动端rem布局和百分比栅格化布局
移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...
- 手机页面rem布局
手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...
随机推荐
- 如何解决Dynamics 365的错误:用户身份验证无效,MSIS0006
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复246或者20170312可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- alibaba fastjson 使用
// 对象转 json 字符串 User user1 = new User("Marry", 30, new Date()); String str1 = JSON.toJSONS ...
- Access denied for user 'root'@'localhost' (using password:YES) Mysql5.7
解决方案: (1) 打开MySQL目录下的my.ini文件,在文件的最后添加一行“skip-grant-tables”,保存并关闭文件.(my.ini在C:\ProgramData\MySQL\MyS ...
- C#1到C#4使用委托的几种方式
using System; namespace DelegateDemo { class Program { private delegate int Cacu(string str); static ...
- [伟哥开源项目基金会](https://github.com/AspNetCoreFoundation)
伟哥开源项目基金会 GitHub_base=> 伟哥开源项目基金会 该项目作者为伟哥,GitHub地址:https://github.com/amh1979: 该项目维护者为鸟窝,GitHub地 ...
- Node的简介
从开始学习node到现在已经有半年多了,中间没有做过什么实际工作中的项目,所以感觉自己的知识有些匮乏,但是我还是要写这些文章,因为工作中的需要用node来开发后台环境,再加上我对这些知识记得不多,都是 ...
- bug管理工具之禅道的测试模块的使用
https://www.cnblogs.com/evablogs/p/6785017.html 角色:产品经理PO,项目经理PM,开发,测试 测试任务: bug: 1.维护bug视图模块:[测试]-[ ...
- Unity2018 Open C# Project Error
错误日志 升级到Unity2018之后,使用 Open C# Project 打开VS工程,出现报错,无法启动VS. 错误日志如下: ArgumentException: Value does not ...
- Cs231n-assignment 1作业笔记
KNN assignment1 KNN讲解参见: https://blog.csdn.net/u014485485/article/details/79433514?utm_source=blogxg ...
- 【Python 12】汇率兑换5.0(Lambda函数)
1.案例描述 设计一个汇率换算程序,其功能是将美元换算成人民币,或者相反. 2.0增加功能:根据输入判断是人民币还是美元,进行相应的转换计算 3.0增加功能:程序可以一直运行,知道用户选择退出 4. ...