移动端常用单位——rem

【移动端常用单位——rem】的更多相关文章

移动端常用单位——rem

移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④rem(移动端主流):相对根节点(html)的font大小 ⑤vw(视口宽度):相对视口宽度比例,1vw相当于视口宽度的百分之一 ⑥vh(视口高度):相对视口高度比例,1vh相当于视口高度的百分之一视口宽度(clientWidth)用JS获取,修改html{ font-size : ?rem } 从…

移动端适配单位rem

0 写在前面本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进行体验,由于我是在手机上打开的他们的项目,一些基于web端开发的产品在前端效果上看起来有些古怪.进而发现,可能是在各个项目组的开发过程中,没有将移动端的适配问题考虑在内. 由于手机网络的普及,越来越多的用户开始使用移动端产品,因此在产品的开发和设计时,有必要考虑移动端的适配问题. 今天我讲通过这篇文…

简单介绍移动端CSS3单位rem的用法

PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表请看caniuse. rem是什么意思呢?CSS手册上的说明:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数. rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数. html{ font-…

CSS之常见布局|常用单位|水平垂直居中

常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:flex(Webkit内核的浏览器,必须加上-webkit前缀.) 5. 响应式布局:媒体查询,如 &:hover 6. 定位布局:position 弹性布局: 概念:用Flex布局的元素,称为Flex容器,他所有的子元素自动成为成员,成为Flex项目例举作用: · 可以通过设置项目(flex容器中…

css常用单位

css常用单位本文来简单介绍下css的常用单位. 绝对长度单位绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终,他们被按照像素处理英寸in(inches) 1in = 2.54cm = 96px 厘米cm(centimeters) 1cm = 10mm = 96px/2.54 = 37.8px 毫米mm(millimeters) 1mm = 0.1cm = 3.78px 1/4毫米q(quarter-m…

细说移动端经典的REM布局与新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局实现单边边框1px 实现多边边框1px 实现边框圆角实现容器固定纵横比 5. REM + VW布局 6. 对比选择方案选择食用方式一.前言说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些布局概念: 1. 静态布局直…

移动端适配之REM

随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏幕呢? 答案就是rem. 俗话说 “授人以鱼不如授人以渔”,但今天我就反其道而行,就是授人以鱼的.因为要跟你说什么设备像素比.css像素.ppi等东西,估计你会晕的(主要是我也搞不懂).废话不多说,先上代码. /*移动端适配 width|height|font-size = 视觉稿量出来的值 / 1…