移动端布局-rem
created(){
// 设置根字号
// 屏幕宽度
setHTML();
// addEventListener()不冲突
window.addEventListener('resize', setHTML, true); function setHTML(){
// 读取当前屏幕宽度
var windowWidth = document.documentElement.clientWidth;
// 看是600的多少倍
var rate = windowWidth / ;
// 是600的多少倍就要让HTML的根字号设置为60的多少倍(这个数字是我自己编的)
document.documentElement.style.fontSize = * rate + 'px';
}
}
}
喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”
移动端布局-rem的更多相关文章
- 移动端布局 - REM方式
默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...
- 移动端布局rem em
1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...
- 移动端布局 rem,和px
1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂. // rem 布局重定义 (function(){ $('html').css('font-size ...
- 移动端布局Rem
一.最好用没有之一 http://www.jianshu.com/p/b00cd3506782 虽然博主说这个方案已经过期了 但是新方案还没有理解 就接着沿用这个 可以根据自己常用的设计稿的宽度修改 ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 移动端布局的一些设置(在viewport里设置使页面显示相同宽度,显示相同像素大小)
viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户 ...
- Vuex里的module选项和移动端布局
Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出
- 移动端布局Demo展示图文
上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起! 需求一:实现下图 ...
- web移动端布局方式整理
写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...
随机推荐
- invalid new-expression of abstract class type 'CurveFittingEdge'
目录 一 报错原因 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 报错原因 今天遇到了一个之前从未遇到的报错: error: invalid new-expression of abstr ...
- 转发:Java对象及其引用
原文: http://zwmf.iteye.com/blog/1738574 Java对象及其引用 关于对象与引用之间的一些基本概念. 初学Java时,在很长一段时间里,总觉得基本概念很模糊.后来才知 ...
- js闭包1
闭包是函数和声明该函数的词法环境的组合. function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 fun ...
- 关于bootstrap按钮的偏移
<body> <div id="divForm" class="addView"> <div class="form-h ...
- MySQL乱码的原因和设置UTF8数据格式
https://segmentfault.com/a/1190000018662023 MySQL使用时,有一件很痛苦的事情肯定是结果乱码.将编码格式都设置为UTF8可以解决这个问题,我们今天来说下为 ...
- spark map和mapPartitions的区别
package dayo1 import org.apache.spark.{SparkConf, SparkContext} import scala.collection.mutable.Arra ...
- P1820 【寻找AP数】
超级题目链接 这题程序实现其实并不难,难的是数学的思想及证明,这在真正的比赛考场上其实是不容易想到的 去年的年赛题目也是在往更难的数学思想上靠拢,并不是一味的编程,需要一定的数学基础 这个..数学性质 ...
- bean初始化和销毁的几种方式
Bean生命周期 Bean创建 -->初始化 -->销毁 1.自定义Bean初始化 和销毁的方法 init-method和destroy-method 创建Bike类 public cla ...
- Leetcode之动态规划(DP)专题-413. 等差数列划分(Arithmetic Slices)
Leetcode之动态规划(DP)专题-413. 等差数列划分(Arithmetic Slices) 如果一个数列至少有三个元素,并且任意两个相邻元素之差相同,则称该数列为等差数列. 例如,以下数列为 ...
- C++学习笔记-构造函数和析构函数
构造函数和析构函数是C++的重要组成部分,了解构造函数和析构函数有助于深入了解C++ 构造函数 构造函数产生的原因 在C++中,有时候需要在对象创建的时候初始化数据,如果采用普通函数的话,每次初始化都 ...