移动端rem适配(375)设计稿
<script>
/**
* ================================================
* 设置根元素font-size
* 当设备宽度为375(iPhone6)时,根元素font-size=16px;
× ================================================
*/
(function (doc, win) {
var docEl = win.document.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var refreshRem = function () {
var clientWidth = win.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
console.log(clientWidth)
if (!clientWidth) return;
var fz;
var width = clientWidth;
fz = 16 * width / 375;
docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, refreshRem, false);
doc.addEventListener('DOMContentLoaded', refreshRem, false);
refreshRem();
})(document, window);
</script>
移动端rem适配(375)设计稿相关推荐
- ui设计移动端字体适配_UI设计稿中常见的单位及移动端适配
一.pt 在我们的设计稿中,经常看到以pt单位来标注的稿子,那么pt究竟是个什么单位?其实pt是用于印刷行业用来表示字体大小的单位,也叫做磅,用过word设置字体的应该不会陌生,它是一个绝对长度,为1 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题
[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 参考文章: (1)[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 (2) ...
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- 移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题 单位问题 肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
- 移动端 REM 适配
在使用 vant 完成移动端项目时, 如果需要使用 rem 单位实现适配 ( Vant 中的样式默认使用 px 单位), 推荐使用 lib-flexible (设置 rem 基准值) 和 postcs ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- Vue移动端项目——Vant 移动端 REM 适配
Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 ...
- vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
最新文章
- 2010年暑假送给大学生30句话
- window.onload 不执行
- 深入理解python之self
- dataTables插件使用
- 休闲食品行业如何数字化升级,腾讯云和卫龙辣条一起打了个样
- 终于在VirtualBox中装好了Mac OS的虚拟机了!(
- Spring IoC、DI、Bean和自动装配的理解
- 用Java读取pdf中的数据
- 安装Firefly错误-Unable to find vcvarsall.bat
- 高并发解决方案相关面试题
- 信息学竞赛学不学计算机史,关于信息学奥赛不得不知道的事
- 外卖行业现状分析_2019年中国外卖行业市场现状与发展趋势分析
- Ubuntu 锁屏后键盘无法输入密码
- 作为一个程序员对特修斯之船的理解
- [Eigen中文文档] 归约、访问者和广播
- Unity 中遮挡层级
- 【Unity大气散射】GAMES104:3A中如何实现大气散射
- 读《图解密码技术》(三):密钥、随机数和应用技术
- Actionbar 溢出菜单背景色设置
- “好像”还是“好象”
热门文章
- 手机进程设置多少个最好_手机打开,开发者选项中的这4个设置,性能瞬间提升一倍,不卡顿...
- arcgis快速生成图框_arcgis图框的制作
- linux4g内存图,linux 支持4G内存
- knx ets5安装
- 计算机网络基础——CS架构与BS架构、OSI七层协议、tcp/ip五层模型讲解
- win10联网进入msn页面,信号出现感叹号
- ESP32开发学习 LVGL Littlevgl 使用文件系统
- 存款利息的计算,有1000元,想存五年,可按照五种办法存:
- scikit 线性回归_使用scikit学习线性回归学习和体育运动nba数据数据科学
- Ethernet/IP介绍