移动端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 ...
最新文章
- 刚刚,Python 3.10 正式发布了,我发现了一个可怕的功能..
- Flume TailDir 基本流程
- PHP GD库---之商详合成分享图片
- oracle使用存储过程做铺底数据
- 《每日一题》62. Unique Paths 不同路径
- 关于“携号转网” 还有许多你不知道的事
- 面向对象——类设计(五)
- 《白帽子讲Web安全》注入攻击
- Ms08067攻防训练平台内测-100个免费邀请码
- 生成缩略图 java_java实现生成缩略图
- 生物信息_odds_ratios、Likelihood_Ratios、发病率、frequency
- cym : BaseQuickAdapter.setOnItemChildClickListener失效点击没反应
- 【论文阅读CVPR2019】Text2Scene: Generating Compositional Scenes from Textual Descriptions
- 腾讯系互联网券商富途证券将赴美IPO,最高融资3亿美元...
- Simulink仿真设置和Scope示波器的使用[方案]
- Db2 license
- kdj指标主要看哪个值_终于有人把KDJ指标讲通透了,简单实用,建议收藏
- JavaScript制作动画
- jquery可爱的小黑猫
- VPP学习(二)VPP安装