pc端和移动端px和rem的转换

关于pc端和移动端px和rem的转换

直接复制下方代码

 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=640){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

上述js的意思是：

如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)

rem原理：
为什么是640px？
对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而它的CSS逻辑像素数为320 x 568px。
如果要切移动端页面，你可以先把效果图宽度等比例缩放到640px，很好用。
为什么要设置html的font-size？
rem就是根元素（即：html）的字体大小。html中的所有标签样式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大胆的用rem作单位。
如果你把html的font-size设为20px，前面说过，rem就是html的字体大小，那么1rem = 20px。
px与rem换算：
　一开始把html的font-size设为100px，此时1rem = 100px，那么原网页的宽55px，高37px的元素样式就可以这么设置 ↓

 width: 0.55rem;height: 0.37rem;

pc端和移动端px和rem的转换相关推荐

css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
像素之间的转换之 px与rem的转换
CSS3中的Rem值与Px之间的换算 bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素总结: px转换成rem要除100 rem转换成p ...
将已写好页面的px转化为rem（px to rem）
将已写好页面的px转化为rem(px to rem) 1.px/rem单位 px:pixel的缩写,像素的意思 rem : 是一个相对单位,1rem等于根元素的font-size值 2.为什么要实现p ...
CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
html分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
rem结合媒体查询适配的vue项目（PC端和移动端共用一套代码）
一.前言上周四接到了一个简单的纯前端网页的项目,我用了三天时间已经开发并且部署完毕(为了实现快速简易部署,使用了gitee pages进行部署,这篇文章记录我使用gitee pages部署的详细过程 ...
css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...

pc端和移动端px和rem的转换

关于pc端和移动端px和rem的转换

pc端和移动端px和rem的转换相关推荐

最新文章

热门文章