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的更多相关文章

  1. 移动端布局 - REM方式

    默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...

  2. 移动端布局rem em

    1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...

  3. 移动端布局 rem,和px

    1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂. // rem 布局重定义 (function(){ $('html').css('font-size ...

  4. 移动端布局Rem

    一.最好用没有之一 http://www.jianshu.com/p/b00cd3506782 虽然博主说这个方案已经过期了 但是新方案还没有理解 就接着沿用这个 可以根据自己常用的设计稿的宽度修改 ...

  5. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  6. 移动端布局的一些设置(在viewport里设置使页面显示相同宽度,显示相同像素大小)

    viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户 ...

  7. Vuex里的module选项和移动端布局

    Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出

  8. 移动端布局Demo展示图文

    上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起! 需求一:实现下图 ...

  9. web移动端布局方式整理

    写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...

随机推荐

  1. vuex 讲解

    vuex 状态的管理状态,它采用集中式存储管理应用的所有组件的状态,尤其是在中大型项目,则是很好的开发利器 vuex 的流程图 vuex 的优势: 1. vuex 的存储状态,响应式的 2. 他是所有 ...

  2. Delphi之TClientSocket和TServerSocket使用tcp keepalive心跳机制实现“断网”、"断电"检测

    开发环境:Delphi7 测试环境:WinXP,Win7  32bit,Win7 64bit 使用TClientSocket和TServerSocket实现TCP长连接通讯,经常因为断电断网等原因导致 ...

  3. Jsp中的四个域对象

    四个域对象: pageContext      page域 request          request域 session          session域 application       ...

  4. 使用ViewFlipper实现广告信息栏的上下翻滚效果

    import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gestu ...

  5. Android studio2 中的 SDK Manager的使用-------Android SDK 的安装与更新(Install missing platform(s) and sync project 编译错误解决)

    最近在编写Android程序,其中有一个问题就是对旧应用的导入,此时往往你的Android SDK中并没有老版本的Android SDK, 此时往往会提示你出现错误 Install missing p ...

  6. Xcode里如何修改类的名字

    今天有朋友问我他的AFNetWorking和别的文件冲突啦,于是我帮他测试了下: 传送门: http://jingyan.baidu.com/article/fb48e8be35726f6e622e1 ...

  7. 如何在google colab加载kaggle数据

    参考https://medium.com/@yvettewu.dw/tutorial-kaggle-api-google-colaboratory-1a054a382de0 从本地上传到colab上十 ...

  8. Django-ORM之ManyToManyField的使用-多对多关系

    表结构设计 多对多关系表创建外键,典型例子:书--作者--出版社,书与作者的关系就可以看作是多对多关系. # 表结构设计 class Book(models.Model): title = model ...

  9. PJzhang:从js文件中寻找子域名的SubDomainizer

    猫宁!!! 有些专门针对企业客户的网站,可能没有供公开注册的页面,但是在js文件中可能会隐藏他们的注册接口,当然这也是一种安全风险,就像有些后台是一定不能不小心放外网一个道理.   最近看到一篇文章提 ...

  10. Linux C/C++基础 文件(下)

    1.fgets和fputs #include <stdio.h> int fputs(const char * str, FILE * stream); 功能:将str所指定的字符串写入到 ...