rem | 易学教程

精通移动端布局 - 实践篇 -

阅读更多关于精通移动端布局 - 实践篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选，提炼出来，原本我也想用我匮乏的语言来描述，但是发现别人已经总结的更好了，所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录：基本概念物理像素设备独立像素 CSS 像素 PPI的概念 DPR的概念缩放的概念 viewPort 的概念 viewport 渲染流程 Meta 标签说明移动端布局实践混合方式 REM 方式响应式 JS自动换算缩放方式 CSS3 缩放 viewport 缩放相关补充为什么需要meta标签？传统响应式布局与移动端响应式的区别移动端字体以及大小的设置移动端背景图缩放设置使用Sass提高px与rem转换效率通过Chrome进行真机调试 weinre 远程调试移动端布局实践混合方式混合方式实现的移动端布局实际上就是对PC端布局技术的组合使用，它主要包含以下技术：定位布局浮动布局可塑性布局百分比布局相对单位将这些布局方法根据页面每个不同部分的特性进行组合使用，例如模态框，弹出层等可以采用定位方式，而页面元素的排版可以采用浮动布局，也可以使用具有可塑性的Flex布局方案，对于元素的尺寸可以采用百分比或者其它相对单位,而这便是我称之为“混合方式”的原因。混合方式进行的移动端网页布局，所采用的技术通常都具有灵活、可伸缩、可塑等特点，甚至连使用的单位，最好都是相对单位

解决win8下AndroidSDK秒退的问题

阅读更多关于解决win8下AndroidSDK秒退的问题

找到安装目录下android-sdk-windows/tools/lib/find_java.bat批处理文件，将其内容替换为，如下所示 @echo off rem Copyright (C) 2007 The Android Open Source Project rem rem Licensed under the Apache License, Version 2.0 (the "License"); rem you may not use this file except in compliance with the License. rem You may obtain a copy of the License at rem rem http://www.apache.org/licenses/LICENSE-2.0 rem rem Unless required by applicable law or agreed to in writing, software rem distributed under the License is distributed on an "AS IS" BASIS, rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. rem See

Rem布局的原理解析

阅读更多关于 Rem布局的原理解析

面试中发现很多人对rem布局的原理不是很清楚，只停留在会使用的阶段，或者理解完全是错误的，本文将给大家讲清楚rem布局的原理，使用方案等知识什么是Rem rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 我在面试时经常问会一道和em有关的题，来看一下面试者对css细节的了解程度，如下，问s1、s2、s5、s6的font-size和line-height分别是多少px，先来想一想，结尾处有答案和解释 < div class = "p1" > < div class = "s1" > 1 </ div > < div class = "s2" > 1 </ div > </ div > < div class = "p2" > < div class = "s5" > 1 </ div > < div class = "s6" > 1 </ div > </ div > .p1 { font-size : 16px ; line-height : 32px ;} .s1 { font-size : 2em ;} .s2 { font-size : 2em ; line-height

setclasspath.bat（2）

阅读更多关于 setclasspath.bat（2）

一、阅读说明 1 术语说明 1.1 下述内容使用“服务器”均代表Tomcat 7.0.75Web服务器 1.2 下述内容使用%SERVER_PATH%表示服务器根目录二、setclasspath.bat文件源码 1 setclasspath.bat文件位置 setclasspath.bat文件位置：%SERVER_PATH%\bin\setclasspath.bat 2 源码内容（以下内容经处理，去除不必要的信息） 1 @echo off 2 3 rem Make sure prerequisite environment variables are set 4 5 rem In debug mode we need a real JDK (JAVA_HOME) 6 if ""%1"" == ""debug"" goto needJavaHome 7 8 rem Otherwise either JRE or JDK are fine 9 if not "%JRE_HOME%" == "" goto gotJreHome 10 if not "%JAVA_HOME%" == "" goto gotJavaHome 11 echo Neither the JAVA_HOME nor the JRE_HOME environment variable is defined 12

vue px直接转化为rem

阅读更多关于 vue px直接转化为rem

1.命令 npm install postcss-px2rem --save-dev npm install px2rem-loader--save-dev 2.build/utils.js文件第一步:找到exports.cssLoaders = function (options) {}方法插入 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } 第二步:找到function generateLoaders (loader, loaderOptions) {}中的 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]替换为 const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] 大功告成!!! 来源： https://www.cnblogs.com/mcll/p/11458309.html

一篇真正教会你开发移动端页面的文章(二)

阅读更多关于一篇真正教会你开发移动端页面的文章(二)

移动端开发的干货篇之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件：移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据，比如拿到一张PSD设计图，它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解，其它设计图尺寸道理是一样的，这并不影响我们的开发。首先我们要有一张设计图才行，看下图，假设我们有一张设计图，它很简单，只有一个红色的方块：拿到了设计图，于是你开开心心的开始写代码了，你打开了编辑器，并写下了如下HTML代码： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body>

rem 和px的区别

阅读更多关于 rem 和px的区别

以下为一种是利用javascript来控制元素的font-size: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=750){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); rem特点 rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢

移动端 rem用法

阅读更多关于移动端 rem用法

rem是如何实现布局的？ rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem是什么？说到rem自然就会想到em，我们知道em是相对于父元素的字体大小的单位，那么rem则是相对于根元素也就是元素的字体大小的单位。上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子： css部分 *{ margin: 0; padding: 0; box-sizing: border-box; list-style: none; } html{ font-size: 62.5%; } header{ width: 100%; height:0.9rem; background:url(../img/上状态栏@2x.png); background-size: 100% 100%; } nav{ width: 90%; height: 100%; } nav div:nth-of-type(1){ width: 10%; height:100%; background: url(../img/fanhui@2x.png) no-repeat; background-position: 0.5rem; background-size:0

移动端自适应rem的设置

阅读更多关于移动端自适应rem的设置

一般所熟知的css样式大小单位有px，em。 px：精确地描述元素大小，不随屏幕大小的变化而变化； em：相对于父元素的大小，如果有层层嵌套的话会导致这个值非常大或者非常小。在写移动端页面的时候为了使页面能够适应多种尺寸的移动设备大小，通常会用rem来表示各个元素的大小。 rem：font size of the root element，即相对于根元素字体的大小。因此，在开发页面之前，需要给根元素的字体指定一个值。一般情况下，浏览器默认的根元素字体的大小是16px，因此为了方便计算，可以将根元素字体大小可以设置为 html{ font-size:62.5%; /*16 * 62.5% = 10;根元素字体大小是10px*/　　　/* */ }h1{　　font-size:1.2rem;/*h1字体的大小是12px*/} 然后通过媒体查询针对不同的屏幕大小设置font-size的百分比，就可以实现前端页面适配了。还有一种方法是将根元素font-size的大小设置成屏幕宽度的一定比，这样通过不同屏幕打开时1rem的值自然也就不一样了。 document.getElementsByTagName('html')[0].style.fontSize = window.screen.width /10 + 'px'; 如果是iPhone5的尺寸，那么根元素字体大小就是32px；

rem适配布局（rem+less+媒体查询和 rem+flexible.js）

阅读更多关于 rem适配布局（rem+less+媒体查询和 rem+flexible.js）

1. rem 基础　rem 是一个相对单位，类似于 em ，em 是父元素字体大小。　em 是相对于父元素的字体大小来说的　rem 是相对于 html 元素字体大小来说的　rem 优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制　比如：根元素（html ）设置的 font-size=12px；非根元素设置 width：2rem；则换成px 表示 24px（12px*2rem） 2. 媒体查询（@media）　@media 可以针对不同的屏幕尺寸设置不同的样式　语法规范：　　@media mediatype and | not | only (media feature){ 　　　　CSS - Code; 　　} 用 @media 开头 mediatype 媒体类型　　　　all：用于所有设备，　　　　print：用于打印机和打印预览，　　　　screen：用于电脑屏幕，平板电脑，手机等关键字 and not only 　　　　and：可以将多个媒体特性连接到一起，相当于“且”的意思　　　　not：排除某个媒体类型，相当于“非”的意思，可以省略　　　　only：指定某个特定的媒体类型，可以省略 media feature 媒体特性必须有小括号包含　　　　width：定义输出设备中页面可见区域的宽度　　　　max

订阅 rem