html手机网站font-size:16em,px、em、rem
px、em、rem
px 是固定的长度单位
em 是父元素的font-size(字体大小)的值,常用来设置首行缩进2em(2字符)
rem 是根节点(html,body)的font-size(字体大小)的值,可以用来做移动端的自适应。
为什么要适配移动端
px像素(pixel)
相对长度单位。相对于显示器屏幕分辨率而言。PC端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem
em
相对于父节点的font-size,会有一些组合的问题。比如你把body的font-size定义为50%,一般地会是8px。
那么你在body里字体大小就是 1em=8px
可当你定义了一个div,然后把字体设置成了75%,请问,现在的1em等于多少?
这个时候你会发现,原来他继承了body的值,现在字体更小了,变成了6px!
因为em是相对于父节点的单位,这么嵌套下去,你要数嵌套层级和比例,你会哭的饿...... (幸好出现了rem)
rem
相对长度单位,指相对于根元素的字体大小的单位。
rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。
使用的时候不需要重新计算rem此时的大小。
rem因为是css3增加的,所以ie8或以下请无视。
屏幕适配的几种方法(流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem)
1、流式布局
在页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度还是和原来一样,实际显示非常的不协调,这就是流式布局的最致命的缺点
往往只有几个尺寸的手机下看到的效果是令人满意的,其实很多视觉设计师应该无法接受这种效果,因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。
流式布局并不是最理想的实现方式,通过大量的百分比布局,会经常出现许多兼容性的问题,还有就是对设计有很多的限制,因为他们在设计之初就需要考虑流式布局对元素造成的影响,只能设计横向拉伸的元素布局,设计的时候存在很多局限性。
2、固定宽度
把页面设置成320的宽度,超出部分留白,这样做视觉,前端设计都挺挺开心,UI再也不用被流式布局限制自己的设计灵感了,前端也不用流式布局。
但是这种解决方案也是存在一些问题,例如在大屏幕手机下两边是留白的,浪费了宝贵的可用空间(放几个广告也好啊,我错了...)
还有一个就是大屏幕手机下看起来页面会特别小,操作的按钮也很小
3、响应式
响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做,主要原因是工作大,维护性
难,所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位,因为这样
反而可以节约成本,不用再专门为自己的网站做一个web、app的版本。
4、通过viewport进行缩放
以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。
说实话,我觉得他和用接下去我们要讲的rem都非常高效,不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。
5、使用 rem 相对字体
rem 等比例适配所有屏幕,通过js来判断当前屏幕大小,进而设置html的font-size
代码里面rem的值就是Ui设计稿上量的px除以100就是你代码中要写的rem值。
(function(){
var currClientWidth,
fontValue,
originWidth;
originWidth = 750;//ui设计稿的宽度,一般750或640
__resize();
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
if (currClientWidth > 768){
currClientWidth = 768;
}
if (currClientWidth < 320){
currClientWidth = 320;
}
fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
})();
// 当前假如当前分辨率是375, 设计稿分辨率是750
// 750/375=0.5
// 比例关系是0.5倍
// 再算一下你要换算1rem等于多少px,
// 假如我要100, 100/16=6.25
// 把这个换算的乘以刚才得出的比例
// 0.5*625=312.5
// 最后还拼接了一个百分号 = 312.5%
// 就是在375分辨率下 1rem = 312.5%
// 312.5% * 16px = 50px
前端设置使用 rem 最经典代码
下面代码在是中国平安工作时,身边的一个同事写的,兼容性特别好,移动端建议使用。
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
代码说明:
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
例如:手机竖屏的宽度为 750px,则 fontSize = 50 * (750 / 375) = 100px
像素就可以直接使用rem,比如 font-size: 0.2rem; 即 font-size: 20px;
rem 做移动端适配
一般长度最好是除得尽的数值,例如40,50。
mimvp blog
var html = document.documentElement;
var htmlWidth = document.documentElement.clientWidth;
//html.style.fontSize = htmlWidth/27+'px'; //如:设计图1080宽度,将屏幕分为27份,每份为设计图的40px
html.style.fontSize = htmlWidth/15+'px'; //如:设计图750宽度,将屏幕分为15份,每份为设计图的50px
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */
height: 2.5rem; /* 相当于设计图上的2.5*50px */
border: 1px solid #000;
}
代码说明:
//html.style.fontSize = htmlWidth/27+'px'; // 如:设计图1080宽度,将屏幕分为27份,每份为设计图的40px
html.style.fontSize = htmlWidth/15+'px'; // 如:设计图750宽度,将屏幕分为15份,每份为设计图的50px
width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */
height: 2.5rem; /* 相当于设计图上的2.5*50px */
参考推荐:
html手机网站font-size:16em,px、em、rem相关推荐
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
- px ,em ,rem
做移动端或者响应式的页面必然需要字体的变化的.这次我就自己的经验来说说他们之间的关系,以及怎么用. px (绝对单位)是我们常用的就不说了. em(相对单位,相对父级) em 指字体高,任意浏览器的默 ...
- px,em,rem,rpx 单位的用法和区别
px px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点 IE无法调整那些使用px作为单位的字体大小: 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体 ...
最新文章
- 由于找不到appvisvsubsystems32.dll_去固始张街逛一逛,以后可能看不到了......
- Spring自定义注解+redis实现接口限流
- 网络是怎样连接的-UDP协议的收发操作
- php怎么做免登录,php---一周内免登录
- 【并查集】【最小生成树】【贪心】给水(jzoj 2015)
- Docker Registry 删除镜像并清理
- SpringCloud学习笔记016---在windows下搭建的Redis服务_在SpringBoot中使用Redis
- $(window).load(function(){})跟$(document).ready(function(){})跟$(function(){})区别
- SRA 案例:关于华为开发者联盟基础服务文档内容的改进建议(华为开发者联盟文档深度体验官)
- 热传导问题的matlab计算,热传导问题的MATLAB数值计算
- Reeder 5.0.3 将RSS阅读体验发挥到极致
- iOS之获取手机DeviceToken,以及苹果测试推送工具Easy APNs Provider
- Autodesk 3ds Max 2014选择集闪退问题
- 新浪微博Android客户端开发之OAuth认证篇
- Python 搭建excel数据分析环境(符Demo源码)
- 浅谈综述论文:文献综述
- opencv与python环境搭建
- I/O 的五分钟法则
- 长沙有哪些牛逼的互联网公司?看完我想回长沙了!
- CSDN官方力推的《用户社区》,值得你来逛逛
热门文章
- 搭载鸿蒙的油烟机,华为、美的合作:搭载鸿蒙系统的家电来了 三大亮点
- 5d4的白平衡模式_佳能5D4/5D3/6D2系列中高端单反相机和全画幅微单EOS R专题系列课程...
- c语言在函数中传递指针,[求助]关于文件指针在函数中传递的问题
- c++ 线程什么时候run_多线程并发支撑基础之JAVA内存模型
- 中文邮件营销html模版,怎么制作邮件营销模板?— —邮件格式
- linux命令帮助怎么看,Linux命令帮助
- sdk是什么_人脸识别在美颜SDK中存在什么意义?
- 全局莫兰指数_空间自相关 | 莫兰指数
- C库函数—strcpy实现
- python安装后cmd找不到_关于Python3.6环境中,virtualenv找不到命令的解决方法