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的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
随机推荐
- 第二篇:彻底搞清楚 Spring Boot 的配置文件 application.properties
前言 在Spring Boot中,配置文件有两种不同的格式,一个是properties,另一个是yaml. 虽然properties文件比较常见,但是相对于properties而言,yaml更加简洁明 ...
- python基础 — random库
python中用于生成伪随机数的函数库是random 因为是标准库,使用时候只需要import random random库包含两类函数,常用的共8个 --基本随机函数: seed(), random ...
- Codeforces VP/补题小记 (持续填坑)
Codeforces VP/补题小记 1149 C. Tree Generator 给你一棵树的括号序列,每次交换两个括号,维护每次交换之后的直径. 考虑括号序列维护树的路径信息和,是将左括号看做 ...
- System.ComponentModel.Win32Exception (0x80004005): 无效的窗口句柄。
原文:System.ComponentModel.Win32Exception (0x80004005): 无效的窗口句柄. 在 WPF 获取鼠标当前坐标的时候,可能会得到一个异常:System.Co ...
- ③ Python3.0 数字类型
Python3 的六个标准数据类型中:不可变数据(3 个):Number(数字).String(字符串).Tuple(元组):可变数据(3 个):List(列表).Dictionary(字典).Set ...
- JavaScript的变量和常量
1.什么是常量? 常量表示一些固定不变的数据 现实生活中人的性别其实就可以看做是常量, 生下来是男孩一辈子都是男孩, 生下来是女孩一辈子都是女孩 2.JavaScript中常量的分类 2.1整型常量 ...
- src属性与浏览器渲染
img标签 只要设置了src属性, 就会开始下载,因此可以使用这个特性,配合display:none,默默的下载一些图片,用的时候直接用,快了那么一丢丢~ 注意:不一定要添加到文档后才会开始下载,是只 ...
- Qt 添加程序图标和系统托盘图标
添加程序图标 第一种方法: 1.创建程序的时候,选择添加默认图标 2.替换程序目录下的ico文件,编译生成即可. 第二种方法: 比较适合一开始没有添加程序图标的情况 1.项目右键-->添加--& ...
- SIM7500 SIM7600 SIM800 HTTP
解释 //Start HTTP service AT+HTTPINIT //Stop HTTP service AT+HTTPTERM //Set HTTP Parameters value /* & ...
- zubax_gnss移植到STM32F407
源码下载:https://github.com/Zubax/zubax_gnss.git 源码默认支持STM32F107芯片 STM32 HAL库测试:zubax_gnss\bootloader\zu ...