移动端“响应式布局”’--rem
使用目的：为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位。
方法一：
1、在页面引入js，获取屏幕大小，更新rem基准。
(function () {
var currentWidth = document.documentElement.clientWidth || document.body.clientWidth
nFont = currentWidth * 50 / 375;
if (nFont > 50) {
nFont = 50
}
getHtml = document.getElementsByTagName('html')[0]
getHtml.style.fontSize = nFont + 'px';
})();
2、设计稿除以100，得到实际尺寸。如（1920px -> 192rem）
方法二：
原理：rem是相对于根元素<html>，这就意味着，我们只需要在根元素确定一个px字号（一般是UI设计师提供--设计稿寄出宽度一般为750px或640px,基础字体一般为75px或75px），则使用在线rem转换网站，就可以将px转rem。
使用方法：（以设计稿为750px,基础字体为75px为例）
1、首先引入app.js
(function(win) {
var docEl = win.document.documentElement;
var time;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 540) { // 最大宽度
width = 540;
}
var rem = width / 5; // 将屏幕宽度分成10份， 1份为1rem
docEl.style.fontSize = rem + 'px';
///rem用font-size:75px来进行换算
// 40/75
// 20/37.5
}
win.addEventListener('resize', function() {
clearTimeout(time);
time = setTimeout(refreshRem, 1);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(time);
time = setTimeout(refreshRem, 1);
}
}, false);
refreshRem();
})(window);
//getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object,有6个属性 top 、bottom、right、left、width和height
//以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已经支持这个方法。
//onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
//为了查看页面是直接从服务器上载入还是从缓存中读取，可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 true，否则返回 false
/**
* Created by Administrator on 2017/6/16.
*/
2、先用px写，写完了就用在线工具，将px转成rem即可。
移动端“响应式布局”’--rem的更多相关文章
- 移动端响应式布局+rem+calc()
1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 【CSS-移动端响应式布局详解】
背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...
- 响应式布局rem的使用
在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- PC 端响应式布局
前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...
- 探讨兼容IE低版本的PC端响应式布局
http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- 移动端响应式布局，rem动态更新
(function(){ var fontSizeMatchDeviceWidth = function(){ var deviceWidth = document.documentElement.c ...
随机推荐
- leetcode-买卖股票的最佳时机④*
题目描述: 方法一: class Solution: def maxProfit(self, k: int, prices: List[int]) -> int: if len(prices) ...
- RMQ问题——ST算法
比赛当中,常会出现RMQ问题,即求区间最大(小)值.我们该怎样解决呢? 主要方法有线段树.ST.树状数组.splay. 例题 题目描述 2008年9月25日21点10分,酒泉卫星发射中心指控大厅里,随 ...
- Joomla - 自定义（自定义模块、修改原有模块样式、添加全局JS）
一.自定义模块 自定义模块 参考 Joomla - 模块系统(新建模块.模块类别.自定义模块)第三点 自定义模块部分 自定义模块布局 参考 Joomla - T3模板(非常好用的4屏响应式模板) 的第 ...
- MyEclipse使用总结——在MyEclipse中新建Maven框架的web项目[转]
前面的文章我们已经在本机安装好了maven,同时在myeclipse中配置好了maven的插件. 链接如下: Maven安装----在Windows上安装Maven myeclipse安装maven插 ...
- 关于群晖的sata扩展卡选择
- Leetcode 242.有效的字母异位词(Python3)
题目: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词. 示例 1: 输入: s = "anagram", t = "nagaram& ...
- 牛客NOIP暑期七天营-TG1 赛后题解
目录 牛客NOIP暑期七天营-提高组1 A-最短路 题目描述 link 题解 代码 B-最小生成链 题目描述 link 题解 代码 C-最小字典最短路 题目描述 link 题解 Update 牛客NO ...
- 廖雪峰Java10加密与安全-5签名算法-1RSA签名算法
1.数字签名 甲在发送加密消息的时候,还要发送自己的签名,而这个签名是用甲的privateKey计算的:而乙要验证这个签名是否是合法的,会用甲的publicKey去验证,如果验证成功,这个消息确实是甲 ...
- HZOI2019熟练剖分(tree)
题目大意:https://www.cnblogs.com/Juve/articles/11186805.html 题解: 先给出官方题解: 其实这题跟期望没什么关系,因为E=$\sum_\limits ...
- Python pylint的安装和使用
Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了平常代码分析工具的作用之 ...