rem | 易学教程

rem适配还原设计稿，换算

阅读更多关于 rem适配还原设计稿，换算

假设设计妹妹给我们的设计稿尺寸为 750 * 1500 。结合网易移动端首页html元素上的动态font-size属性、设计稿尺寸、前端与设计之间协作流程一般分为下面两种： 1、网易做法引入：页面开头出引入下面这段代码，用于动态计算font-size 1 (function(doc, win) { 2 var docEl = doc.documentElement, 3 isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), 4 dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1, 5 dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放 6 dpr = 1, 7 scale = 1 / dpr, 8 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 9 docEl.dataset.dpr = dpr; 10 var metaEl = doc.createElement('meta'); 11 metaEl.name = 'viewport'; 12 metaEl.content

rem的计算

阅读更多关于 rem的计算

( function ( doc, win) { 　　console.log( "dpr:"+win.devicePixelRatio) ; 　　var docEle = doc.documentElement, 　　isIos = navigator.userAgent.match( /iphone |ipod| ipad/gi), 　　dpr=Math.min( win.devicePixelRatio, 3) ; 　　scale = 1 / dpr, 　　resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize' ; 　　docEle.dataset.dpr = dpr ; var metaEle = doc.createElement('meta') ; 　　metaEle.name = 'viewport' ; metaEle.content = 'initial-scale=' + scale + ',maximum-scale=' + scale ; 　　docEle.firstElementChild.appendChild( metaEle) ; 　　var recalCulate = function () { 　　　　var width = docEle

移动端开发适配的2中方案

阅读更多关于移动端开发适配的2中方案

原文地址：http://www.cnblogs.com/tugenhua0707/p/5568734.html 针对移动端适配的方案~ 一：第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置： html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400px) { html { font-size: 125px; } } @media(min-width: 640px) { html { font-size: 200px; } } html的默认字体大小为100px；是针对于320px来设置的，那么在360px，400px，640px下都需要等比例缩放；计算公式为： 320px/100 = 360 / x; 那么 x = (360*100 / 320) px; 其他的等比例缩放也是这个意思；那么设计师给的设计稿给我们的都是默认640px的设计稿；而我们可以知道font-size:200px; 因此我们可以设置此倍率为200；想px转化为rem的话

动态rem解决移动前端适配

阅读更多关于动态rem解决移动前端适配

动态rem解决移动前端适配移动前端适配一直困扰很多人，我自己也是从最初的媒体查询，到后来的百分比，再到padding-top这种奇巧淫技，再到css3新单位vw这种过渡转变但这些都或多或少会有些问题，直到使用了动态rem 才真正不再在适配这个问题上发愁只因为叫动态rem 是因为他是真正意义上随着屏幕的大小来变化的。 rem rem官方解释是 font size of the root element 字面意思就是根元素的font-size值也就是rem是相对于元素的如下代码： <html> <meta charset="utf-8"/> <head> <style> html{ font-size:10px;} .p1{font-size:1rem;} .p2{ font-size:2rem;} </style> </head> <body> <p class="p1">这是一个1rem字体</p> <p class="p2">这是一个2rem的字体</p> </doby> </html> 从最终效果可以看出文档中元素的字体大小是基于html根元素的 p1的font-size为10px p2的font-size是20px viewport <meta name="viewport" content="width=device-width, initial-scale=1

如何利用rem在移动端不同设备上让字体自适应大小

阅读更多关于如何利用rem在移动端不同设备上让字体自适应大小

本人也是一个刚刚接触前端的小虾米，对于移动端这一块更是一抹眼的黑，前端时间接手开始一个移动端的项目，在网上查询了一下rem的作用，百度搜索下来全是介绍rem的作用原理的（rem是根据根元素计算的），然后基本上给我的就是 html{font-size：62.5%} body{font-size：1.2rem} 　　移动端不同屏幕显示的字体大小是有区别的，所以现在我都是配着以下js使用匹配不同的移动端设备屏幕。 function page() { //通过navigator判断是否是移动设备 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { //在移动端 (function (doc, win) { // html var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {

响应式布局浅析

阅读更多关于响应式布局浅析

所谓响应式布局，就是页面会根据当前运行的设备的大小自行进行调整，实现方案主要有以下三种： 1）隐藏例如在 PC 端的一些友情链接或者不重要的内容在移动端可以选择隐藏起来。 2）换行在 PC 端显示一行的内容，由于移动端设备宽度比较小，所以可以选择显示为几行。 3）自适应空间例如，左边元素给定一个具体的值，右边元素的宽度令其根据不同的设备宽度自行调整。具体的实现方法主要有以下几种： 1）rem rem 是一个相对单位，一般 1rem = html设置的 font-size 的值。关于 rem 的详细介绍可以参考移动 web 开发适配秘籍 Rem 这个免费课程。通过设置不同设备 html 的 font-size 改变 rem 的值，令 1rem 单位的值随着设备的增大而增大。 2）viewport 设置 <meta name="viewport" content="width=device-width, initial-scale=1.0" > ，关于这个下面会介绍。 3）media query 判断当前是什么设备，然后根据不同的设备设置不同的样式。接下来先说一下 viewport 这个 meta 标签。 <meta name="viewport" content="width=device-width, initial-scale=1.0" >

rem单位

阅读更多关于 rem单位

rem单位 rem基础 px是固定单位，不同分辨率下效果不一样，导致网页布局出现偏差。 em是根据父元素来改变字大小 rem是根据根元素html来改变字体大小，只要改变了根元素的font-size就可以改变所有字体的大小。 1, html{font-size:20px;} body{width:6rem;} 此处1rem=20px 2, html{font-size:62.5%;} body{width:6rem;} 此处1rem=10px;因为默认1rem=16px; 10/16=62.5% rem跟随分辨率而变化的方法我们的目的是分辨率不同，字体大小也不同，即适应屏幕分辨率。那么怎样才可以让rem的大小随着分辨率而变化呢？ 1，media query，这个不是通用性方法，根据常用的分辨率制定rem。 1 html {font-size : 20px;} 2 @media only screen and (min-width: 401px){ 3 html {font-size: 25px !important;} 4 } 5 @media only screen and (min-width: 428px){ 6 html {font-size: 26.75px !important;} 7 } 8 @media only screen and (min-width:

移动端使用rem适配及相关问题

阅读更多关于移动端使用rem适配及相关问题

移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。 rem定义及浏览器支持情况 rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。可以先看看rem的浏览器支持情况： Chrome 31-34 & Chrome-based Android versions (like 4.4) have a font size bug that occurs when the root element has a percentage-based size. Reportedly does not work on Android 4.3 browser for Samsung Note II or the Samsung Galaxy Tab 2 on Android 4.2. Borders sized in "rem" disappear when the page

移动端适配rem

阅读更多关于移动端适配rem

在main.js中 import './plug/rem' ; 在src创建plug/rem.js /** * @ author IvanCai * @ description 此函数用动态计算 rem 所需的 font-size * / / * eslint-disable * / ( function ( doc , win ) { const docEl = doc . documentElement ; const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' ; const recalc = function ( ) { const { clientWidth } = docEl ; if ( ! clientWidth ) return ; docEl . style . fontSize = ( clientWidth / 3.75 ) + 'px' ; } ; if ( ! doc . addEventListener ) return ; win . addEventListener ( resizeEvt , recalc , false ) ; doc . addEventListener ( 'DOMContentLoaded' , recalc ,

在服务中使用android:process=":remote"的意义

阅读更多关于在服务中使用android:process=":remote"的意义

android:process=":remote"，代表在应用程序里，此时有":“号,当需要该service时，会自动创建新的进程。而如果是android:process=“remote”，没有”:"分号的，则创建全局进程，不同的应用程序共享该进程。来源： CSDN 作者： DingPenqQiang 链接： https://blog.csdn.net/qq_36707431/article/details/103780063

订阅 rem