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的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
随机推荐
- LeetCode 75. 颜色分类(Sort Colors) 30
75. 颜色分类 75. Sort Colors 题目描述 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中, ...
- docker使用1
1. 安装 可以参考https://www.runoob.com/docker/centos-docker-install.html 注意linux版本是centos7.6 2. docker启动,停 ...
- 百度小程序上传失败 ServerError:30010的原因
最近通过uniapp编译百度智能小程序后上传遇到了报错,错误码为30010. 原因很简单开发者工具和版本库产生了冲突. 两个解决方案,升级开发者工具,降低发布时的版本库 exit;
- C程序设计语言练习 第二章
2.3 常量 strlen函数:返回s的长度 int strlenn(char s[]) { int i=0; while(s[i] != '\0') ++i; return i; } 2.7 类型转 ...
- python3.7 pip升级或安装,拒绝访问 解决方案
- web页面元素定位
所有web网页中有8种元素定位方式 靠单一的特征找元素:6种(id,class_name,tag_name,name,link_text(2))组合各种特征和关系来找元素:2种(xpath,css) ...
- Django组件之cookie、session
一.cookie 1.1 产生背景 HTTP协议是无状态的,对服务器来说,每次的请求都是独立的.状态可以理解为客户端和服务器在某次会话中产生的数据,那无状态的就以为这些数据不会被保留.会话中产生的数据 ...
- 29 匿名内部类、函数型接口、lamda表达式的引入
匿名内部类 参考:https://www.runoob.com/w3cnote/java-inner-class-intro.html 进入后搜索匿名内部类. 函数型接口 函数式接口(Function ...
- 【简●解】[HNOI2005]星际贸易
[大意] 太多了,懒得打,贴\(LG\)的图了... [分析] 开始拿到这道题有点慌:怎么限制条件这么多,再读读题. 注意一个东西,就是贸易额与费用是独立分开的,并且题目保证只有一种方案获得最大贸易额 ...
- 基于CentOS6.5的Dubbo及Zookeeper配置
基于CentOS的Dubbo及Zookeeper配置 需要提前准备好的资料: 1.首先配置java环境 步骤: 将jdk的包上传至centos服务器的/opt目录下,并且解压 tar -zxvf jd ...