JS+rem,移动端适配
window.onresize = function () {
setHtmlFz();
}
setHtmlFz();
function setHtmlFz() {
// 基础值
var baseVal = 100;
// 设计稿的宽度
var desPage = 750;
// 要适配的屏幕的宽度
var width = document.querySelector("html").offsetWidth;
// 基础值*要适配的屏幕的宽度/设计稿的宽度
var fz = baseVal * width / desPage;
// 设置到html标签中
document.querySelector("html").style.fontSize = fz + "px";
}
JS+rem,移动端适配的更多相关文章
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.
这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...
- rem移动端适配
rem作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The f ...
- MetaHandler.js:移动端适配各种屏幕
MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...
- rem 移动端适配
1.从网易与淘宝的font-size思考前端设计稿与工作流 http://www.cnblogs.com/lyzg/p/4877277.html 2.淘宝弹性布局方案lib-flexible实践 ht ...
- 30行js rem弹性布局适配所有分辨率
<script> /* # 按照宽高比例设定html字体, width=device-width initial-scale=1版 # @pargam win 窗口window对象 # @ ...
- 移动端适配-rem(新)
概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- 移动端适配之REM
随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
随机推荐
- docker容器中用户自定bridge网络与默认bridge网络之间的区别
转载 https://blog.csdn.net/dkfajsldfsdfsd/article/details/79959534
- PAT(B) 1085 PAT单位排行(Java:20分)
题目链接:1085 PAT单位排行 (25 point(s)) 题目描述 每次 PAT 考试结束后,考试中心都会发布一个考生单位排行榜.本题就请你实现这个功能. 输入格式 输入第一行给出一个正整数 N ...
- Django视图扩展类
Django视图扩展类 扩展类必须配合GenericAPIView使用扩展类内部的方法,在调用序列化器时,都是使用get_serializer 需要自定义get.post等请求方法,内部实现调用扩展类 ...
- kubernetes 实践二:kubectl命令使用
这里记录kubernetes学习和使用过程中的内容. CentOS7 k8s-1.13 flanneld-0.10 docker-18.06 etcd-3.3 kubectl用法概述 kubectl是 ...
- 关于django操作orm的一些事--反向生成orm、连接多个数据库
1. django反向生成orm的类代码 使用命令python manage.py inspectdb > app01/models.py,注意,我这里的app01是app的名字. 2.djan ...
- js注意点
1.在JS中:var a=''; 则 a==0或a==false 结果都为true; 如果是“====” 则为false
- 15天入门RT-Thread之第一天
今天开始学习jiezhi15天的RT-Thread入门系列课程 感谢RT-Thread提供的免费课程,终于可以系统入门RT-Thread ,感兴趣的同学可以关注RT-Thread官方公众号,获取最新的 ...
- C#精粹--协变和逆变
概念 协变和逆变来源于类型和类型之间的绑定,C#4.0开始在泛型的接口和委托上支持协变和逆变,不过在这个版本之前的委托也是支持协变和逆变的.比如数组就支持协变,但是这不是一个好的特性,这C#初期版本从 ...
- iOS 播放系统自带铃声
播放声音代码例子 https://github.com/baitongtong/git-.git 给一个国外网址,苹果系统铃声以及自定义铃声免登陆免费下载:http://www.zedge.net/r ...
- iOS-右滑返回,利用Runtime添加全屏Pop手势
项目中经常会遇到类似需求,需要在某控制器增加全屏右滑返回功能. 在我们不隐藏 NavigationBar 的前提下,系统会自动替我增加此功能,只是它作用的范围仅仅在屏幕左边有限区域. 我们需要在整个界 ...