rem布局,根据不用设备分辨率更改跟字体大小
(function(win,doc){
change();
function change(){
doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/320+'px';
}
win.addEventListener('resize',change,false);
win.addEventListener('orientationchange',change,false); /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
})(window,document);
相关链接:https://segmentfault.com/q/1010000015609365/a-1020000015609802
rem布局,根据不用设备分辨率更改跟字体大小的更多相关文章
- 响应式布局中为什么要使用em设置字体大小而不用px
px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...
- 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...
- 更改spinner字体大小
做下拉框的时候,我采用的是spinner和string-array,因为比较简单. 可是整个界面的字体大小与下拉框里面的字体大小不符合,所以我们要更改spinner里面的字体大小. 方法是: 在布局中 ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- 响应式自适应布局代码,rem布局
响应式自适应布局代码 首先是先设置根字体大小,PC端一般是16px为根字体,移动端会有不同的,根据情况来设置 js部分 document.querySelector('html').style.fon ...
- Android手机在不同分辨率情况下字体自适应大小
两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size ...
- rem根据网页的根元素(html)来设置字体大小
rem根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小
随机推荐
- Entity Framework Tutorial Basics(35):Local Data
Local Data The Local property of DBSet provides simple access to the entities that are currently bei ...
- c++特别要点:多态性与虚函数
本来是准备在工厂模式中顺便整理.但粗略浏览了,内容还是很多,需要单独开一篇. 一.什么是多态性? 多态性可以概括为“一个接口,多种方法”. 多态与非多态的区别在于“成员函数调用地址的早绑定和晚绑定”. ...
- 787. Cheapest Flights Within K Stops
There are n cities connected by m flights. Each fight starts from city u and arrives at v with a pri ...
- 前端的异步解决方案之Promise和Await-Async
异步编程模式在前端开发过程中,显得越来越重要.从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题.随着ES6新标准的出来,处理异步数据流的解决方案又有了新的变化.Promise就是这其 ...
- 注解和注释以及Spring和SpringMVC常用的注解
1.两者区别 注解 :参与代码编译,以@开头的.它是给应用程序看的,单独使用注解毫无意义,一定要跟工具一起使用,这个所谓的工具实际就是能读懂注解的应用程序 注释 :对代码没有影响.对代码起到解释.说明 ...
- Javascript之入门篇(一)
上一篇学习了什么是JavaScript语言及其作用和特有的特点等,本篇将详细介绍JavaScript一些入门使用方式. 对于初学者来讲,由于JavaScript是嵌入到HTML页面里面的,首先创建一张 ...
- 转载 javaweb三大框架和MVC设计模式 (自己加拉些内容)
javaweb三大框架和MVC设计模式 一.MVC设计模式 1.MVC的概念 首先我们需要知道MVC模式并不是javaweb项目中独有的,MVC是一种软件工程中的一种软件架构模式,把软件系统分为三个基 ...
- 使用pycharm创建自己的第一个django项目
PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制. ...
- Loadrunner 性能测试笔记
性能测试脚本 // 关联token 放在请求返回前 web_reg_save_param("tokenId", "LB=,\"tokenId\":\& ...
- sublime安装插件autoprefixer
安装插件autoprefixer步骤: 1.确保Node.js已经安装,未安装请 点击 这里>> 2.下载autoprefixer插件 https://github.com/sindres ...