移动端根据设计稿宽度适配 px转换相对单位rem

为了计算方便，一般建议 1rem = 100px(设计稿px)，要换算这样的比例需要设置html对应的fontSize，计算规则如下：
fontSize = 屏幕宽度 / 设计稿宽度 * 基本宽度
如果基本宽度是100，那么 1rem = 100px(设计稿px)

假如设计稿宽度是 750px , 开发以iphone6/7/8为例，宽度是375，如果想1rem=100px(设计稿px)，那么fontSize = 375/750*100 = 50px;

以下代码可以按设计稿适配1rem = 100px;
(设置参数即可)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximim-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui">

.wrap {width: 7.5rem; /* 6.4rem 10.8rem */
}
.test {width: 1rem; /* 设计稿实际宽度100px */
}

var baseSize = 100; // 1rem = 100px(设计稿);
var baseWidth = 750; // 640 750 1080
var fontSize = (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2);
document.getElementsByTagName("html")[0].style.fontSize = fontSize+"px";

移动端根据设计稿宽度适配 px转换相对单位rem相关推荐

移动端H5设计稿的问题与解决办法汇总
前沿就目前来看,移动端的H5是目前的一大趋势,毕竟就目前来说手机占据的极大的市场,人们每次都会在空闲时刻拿起自己的手机浏览网页,应用以及各种内容,但是针对于各种不同的手机长宽比以及分辨率是不同的,如 ...
vue3+vant移动端适配 px转换rem
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem lib- ...
移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem.vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时.费力的过程.这是就需要一个工具可以帮我们自 ...
Vue笔记（二）如何做移动端适配让你只用关心设计稿
一. 移动端基础知识在移动端开发时,我们经常发现出现布局后有不兼容的问题,如何在不同设备上进行适配呢,希望康完这边,你能从原理到应用彻底熟悉移动端适配. 1.1 手机屏幕现状移动端设备屏幕尺寸非常 ...
ui设计移动端字体适配_JavaScript之独立使用lib-flexible.js适配移动端UI设计750px设计图...
本篇文章主要讲述JavaScript之独立使用lib-flexible.js适配移动端UI设计750px设计图,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. 最近在和设计沟通关 ...
PC端页面适配px转rem
rem是相对长度单位,页面布局需要在不同比例的pc端显示同样大小的页面,不希望在分辨率比较高的屏幕上页面就很小. 一般设计稿都是px单位,在开发的时候也会用到px单位.如果在开发前,可以利用vscod ...
从网易与淘宝的font-size思考前端设计稿与工作流
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...
移动端页面如何优雅的适配各种屏幕，包括PC端
本文为Varlet组件库源码主题阅读系列第八篇,读完本篇,可以了解到移动端页面如何适配各种尺寸的屏幕,包括pc端,另外如何将触摸事件转换成鼠标事件. 移动端适配开发移动端页面,我们通常都会按照一个固 ...

移动端根据设计稿宽度适配 px转换相对单位rem

移动端根据设计稿宽度适配 px转换相对单位rem相关推荐

最新文章

热门文章