rem

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。 为什么web app要使用rem？ 这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。 1、实现强大的屏幕适配布局： 最近iphone6一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做web app有一种做法是以320宽度为标准去做适配，超过320的大小还是以320的规格去展示，这种实现方式以淘宝web app为代表作，但是近期手机淘宝首页进行了改版，采用了rem这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。

1、场景开发：移动端飘雪场景实现； 2、rem布局的原理； 3、Rem布局和vh,vw布局那种更火； 4、Position定位的几个属性和用法； 5、使用rem布局的问题； 6、使用rem布局，移动和pc是否可以用同一套样式； 7、使用rem布局，配合sass怎么处理样式；（sass预编译） 8、Webpack处理样式，转换成px如何实现； 9、使用sass预处理样式，使用的loader是哪几个，加载顺序是怎样的（从左到右，从又到左）； 10、react怎么优化； 11、怎样会导致页面白屏； 12、本地存储，cookie，localstorage，sessionStorage的区别； 13、Locastorage存在的问题； 14、场景开发：指定位数的数，如果不足处补0；比如6位数，提供了12，输出要求000012； 15、移动端如果某款手机，真机调试出问题了，你该怎么处理； 16、解决merge的冲突； 17、使用webpack，打包输入单个文件或是多个文件； 18、常用的跨域方法； 19、jsonp跨域原理； 随记：这是我以外包身份去网易面试的面试小结。对于像网易这种大公司，我是很向往的。希望以后自己的技术精进了，能进这样的大公司。也希望路过的人，通过自己的努力，不负好时光~ 2018/8/15 今天发现，原来这篇文章没有发出去，今天我就再发一遍咯~ 来源： https:/

index.less @import "common"; body{ min-width: 320px; width: 15rem; margin: 0 auto; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; background-color: #F7F7F7; } *{ box-sizing: border-box; text-align: center; } img{ display: block; } a{ text-decoration: none; } @bounce:50; /* 顶部搜索框 */ .top{ position: relative; overflow: hidden; &::before{ content: ""; position: absolute; height: 2000rem / @bounce; width: 2000rem / @bounce; border-radius: 2000rem / @bounce; z-index: -1; background: linear-gradient(to right,rgb(255, 220, 220),rgba(255, 0, 0, 0.658)); left: -86.5%; top: -1600rem /

rem适配布局 rem基础 rem是一个单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 比如，根元素（html）设置font-size=12px；非根元素设置width:2rem;则换成px表示就是24px； rem的优点就是可以通过检测媒体查询来修改html里面的文字大小来改变元素的大小 媒体查询 媒体查询（Media Query）是CSS3新语法。 1.使用@media查询，可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 4.目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询 语法规范 @media mediatype and not|only (media feature){ CSS-Code; } 1.用@media开头 注意@符号 2.mediatype媒体类型 将不同的终端设备划分成不同的类型，称为媒体类型 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，只能手机等 3.关键字and not only 关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件 1.and：可以将多个媒体特性连接到一起

宽带连接工具[bat] 功能概述： 本工具使用批处理编写，提供自动判断网络状态以决定断开或是连上网络，本月已用宽带时长，到月初自动清零。提供联网日志功能，可以记录下所有的连接或断开网络记录。如果连接失败，自动提示输入密码，特别适合每天要更换动态密码者使用。（windows系统可用） 从功能上说，我不需要这个脚本，不过留下作为bat使用的参考。 @echo off :retry ::窗口配置 title 宽带连接工具 mode con cols=50 lines=15 & color 02 ::检查配置文件是否存在，否，则创建。 if not exist netconfig.ini call:remd ::检查配置文件是否符合标准格式，否，则重新创建 findstr . "netconfig.ini">nul && cls||call:remd Setlocal Enabledelayedexpansion set bbj1=[宽带连接名称：] set bbj3=[用户名：] set bbj5=[密码：] set bbj7=[本月已用宽带时长] set bbj9=[时间显示开关] set bbj11=[宽带时长显示开关] set bbj13=[上网时间记录开关] set bbj15=[上次使用时间] call:extxt ::读取配置信息 Setlocal

使用rem适配已经快一年了，感觉还是不错的，在这里记录一下。 ##1.原理 rem 是一个相对单位，相对的是根元素‘html’的字号。比如html的font-size:100px;那么1rem=100px；html的font-size:120px;那么1rem=120px；所以我们可以根据手机不同的尺寸，设置不同的根元素字体，来适应不同的屏幕。而且它兼容性好，从安卓2.1就支持rem。 举个栗子： //在iPhone5下 html{ font-size:100px; } //在iPhone6下 html{ font-size:116px; } .box{ width:1rem;//在iPhone5下，width为100px;在iPhone6下,width为116px，从而实现了大小屏的适配 } ##2.设置基准 我们依据什么来设置根目录的字号呢？两种方案 ###2.1css媒体查询宽度设置断点 为什么是宽度？因为垂直方向的可以出滚动条，而水平方向出现滚动条就有点怪怪的了。 @charset "utf-8"; //iphone5 @media screen and (max-width: 374px){ html{ font-size: 85px; } } //iphone6 @media screen and (min-width: 375px)and(max-width:

!function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n=t.clientWidth||320;n>720&&(n=720); t.style.fontSize=n/d+"px" }; e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) }(window); 规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。 其中 var n=t.clientWidth||320;n>720&&(n=720); 的意思是:如果clientWidth的值获取不到,n就等于320,如果n>720成立就会执行n=720的操作 M && N中，若M为假，则N不被执行； M｜｜N中，若M为真，则N不被执行。 上面这段js手机上在有表单的时候,在输入法弹出的时候会失灵 代码一：

<script type="text/javascript"> (function(){ var docEl = document.documentElement; function setRemUnit(){ //获取到rem的基准值 var rem = docEl.clientWidth / 10; //动态设置html根元素的font-size docEl.style.fontSize = rem + 'px'; } setRemUnit(); //窗口大小变化时触发 window.addEventListener('resize',setRemUnit); //窗口出现在当前屏幕时(有浏览器兼容性) window.addEventListener('pageshow',function(e){ if(e.persisted){ setRemUnit(); } }); })(); </script> 可直接放在页面头部 来源： https://www.cnblogs.com/rickdiculous/p/11801784.html

本文来自尚妆前端团队 南洋 发表于 尚妆github博客 ，欢迎订阅。 移动端H5页面rem缩放方案flexible.js兼容375px方案的思路 参考： 移动端高清、多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是 <meta name="viewport" content="width=375, user-scalabe=no"> ，而新页面使用的是flexible.js伸缩方案，动态生成meta[viewport] <meta name="viewport" content="initial-scale=[num], user-scalabe=no"> 如何在老页面使用px布局的前提下，新页面使用rem布局，组件也使用rem布局，并且组件可以兼容老页面和新页面是本文的结果。 首先会介绍375px方案和rem方案的实现原理。 375px方案 <meta name="viewport" content="width=375, user-scalabe=no"> 375px方案的页面开发过程对新人非常的友好，利用页面的布局视口（layout viewport）为固定值375px，和移动端浏览器窗口的自动缩放功能（视觉视口

一、写在前面的话 　　作为一面前端开发者，对 px 、em 、 rem 应该是再熟悉不过了，但大多数小伙伴应该都和我一样仅仅停留在了解的层面，并不是实质性的掌握它们。本文对三者进行了详细的总结和详细说明，不熟悉的各位小伙伴阅读本文一定会有所收获，如果你对这三者已经了解的非常透彻，那本文可能对你的帮助不大。 二、简述 　　px、em、rem都是计量单位，都能表示尺寸，但是有有所不同，而且其各有各的优缺点。 三、PX （pixel） 　　Px 表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 注： 1、像素 1024x768 的，表示的是水平方向是 1024 个像素点，垂直方向是 768个 像素点。　　 2、以上所述 px 为 css 中定义的像素（以下简称 css 像素），与实际的物理像素是有区别的，早期电脑屏幕的物理像素与 css 像素相同，但是随着科技的发展，高精度屏幕开始出现在人们的视野中。以 iPhone 的 Retina　　屏为例，其物理像素与 css 像素关系见下图。 　　为此移动端浏览器以及某些桌面浏览器引入了 devicePixelRatio（DPR 设备像素比）属性，其官方的定义为