普及知识点
(1)浏览器的默认字体大小:16px
(2)chrome字体最小限制:12px
(3)CSS单位分为绝对单位和相对单位
CSS单位
CSS中,单位分为两类:
(1)绝对单位:无论其他相关的设置怎么变化,绝对单位指定的值是不会变化的;
(2)相对单位:没有固定的度量值,是由其他元素尺寸来决定的相对值。
CSS单位兼容
CSS重要单位集合:
①px像素Pixel,绝对长度单位,相对于显示器屏幕分辨率而言的。
②em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
③rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
④%一般宽泛的讲是相对于父元素
⑤vw与vh视窗单位,vmax与vmin可以判断屏幕横竖屏
CSS2及CSS3单位集合之em
1、简介:
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未设置,则相对于浏览器的默认字体尺寸16px。
2、特点:
① em的值并不是固定的
②em会继承父级元素的字体大小
3、默认计算方式
浏览器的默认字体大小都是16px,所以1em=16px,那么10px=0.625em
4、继承性
①em是一个相对的单位,是当前元素相对于当前对象字体的大小而言的;
例如:父元素设置font-size: 32px ,子元素设置font-size: 1em ,那么子元素的字体大小也是32px。如果父元素没有设置字体大小的话,就是想对于浏览器默认的字体大小而言的。
② em是一个相对的单位,是当前元素或相对于父元素字体的大小而言的;
如果父元素没有设置字体大小,则相对于浏览器默认字体大小而言的。
CSS2及CSS3单位集合之%
一般宽泛的讲是相对于父元素,但是并不是十分准确,分为以下几种情况:
①对于普通定位元素就是我们理解的父元素
②对于position: absolute;的元素是相对于已定位的父元素
③对于position: fixed;的元素是相对于ViewPort(可视窗口)
CSS2及CSS3单位集合之ex和ch
ex 和ch 单位,依赖于当前字体font-family 和字体大小 font-size。
ex 指当前字体环境中小写字母x 的高度;
ch 指当前字体环境中数字 0 的宽度。
什么是rem?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
看到rem会想起em单位,em(font size of the element)是指相对于当前对象内字体大小的单位。它们之间其实很相似,只不过一个宽高计算是依赖根元素字体大小,另一个是依赖当前对象或祖先的字体大小计算。
rem宽高转换
①rem计算验证:
所谓依赖根元素来计算的方式,就是根据根元素html的font-size字体大小计算,然后所有的rem就根据这个font-size来计算
②rem计算验证:
问题:
验证后发现chrome字体限制BUG,因为chrome限制最小字体为12px,所以此时无法将根元素字体大小的16px的62.5%缩为10px。
即chrome下最小字体为12px,所以假如你设置html{font-size:62.5%} header{height:8rem} 那么在其他浏览器下 header的高度是80px,但是在chrome下是96px。
方案:
设置:html{font-size:625%} 这样子既便于计算,又不会产生这个问题
③rem计算验证:
此时再使用rem的话1rem=100px,如果想设置header元素高度为80px,则可以这样设置header{height:0.8rem;}
rem字体转换
如果将html{font-size:625%;}后,宽高计算都没有问题,但字体会顶飞,变得特别大…
rem面试题
meta元标签
到目前为止,PC端正常展示,接下来用移动端IPhone6机型测试下,显示效果如下所示:
接下来找个企业官网做下对比分析
普阳铁厂http://hbpygt.cardofcom.net/com.htm
奥星官网http://www.austar.com.cn
对比后发现同一个网站,在移动端无法正常展示
开发移动端设置viewport配合进行缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
参数分析:
device-width设备宽度、initial-scale初始缩放比、maximum-scale允许用户缩放到的最大比例、user-scalable用户是否可以手动缩放 (no/yes)
关于meta元标签其他介绍**,详见下节:**
移动端缩放适配:
开发移动端设置viewport配合进行缩放,加上name=viewport缩放设置后再次测试
rem计算转换
到目前为止,已经可以实现移动端和PC端的rem布局,但还会发现一个问题…
同一个元素,在不同机型上高度一样(正常业务逻辑:屏幕越小,元素应该是等比例缩小,从而统一展示效果)
所以接下来要解决一个问题:
怎么样在不同分辨率的情况下计算根元素需要的font-size的值,实现比例缩放,统一展示效果?
方案:
关于这个点,其实有两种解决方案,一种是基于CSS的情况,另外一种就要通过js计算获得
@media实现rem转换
怎么利用css做到基于不同的分辨率来定义呢?
首先想到的就是媒体查询。当基于媒体查询来做屏幕自适应时,首先要考虑下做哪些屏幕,做一下简单的列举,常见的屏幕分辨率的媒体查询:
除了以上列举几个,还有其他机型需要进行适配,所以由此可以看出利用CSS实现基于不同的分辨率来定义不同根元素字体大小,从而实现不同的rem大小有些麻烦。所以这种方法有一个弊端,需要计算每一个屏的基础值
所以开发中大多使用JS代码计算来根据屏幕宽度实现rem大小比例转换。
js实现rem转换
JS动态设置根元素字体大小
(1)获取根元素字体大小
document.documentElement.style.fontSize
(2)获取屏幕可视区域窗口宽度
document.documentElement.clientWidth
计算语法:
document.documentElement.style.fontSize
=
document.documentElement.clientWidth / 750*100 + ‘px’;
通过以上计算公式便可以实现在750px大小的设备中,1rem=50px
根元素字体大小font-size=(375/750)*100+‘px’=50px
接下来改动机型再次测试,例如改为小一号的iPhone5,此时会发现宽高变为42.66,实现了根元素字体大小font-size跟随机型缩放效果。
接下来做下处理,一般在页面加载时自动执行js代码进行根元素字体大小计算 ,对js代码进一步修改如下
针对以上各种问题及情况,勤劳的程序猿们写了一个开源的解决方案flexible。
简介及原理:
flexible.js是一个开源的用于终端设备的适配解决方案,主要用于解决各种不同尺寸移动设备的大小自适应问题,其原理是通过移动设备的dpr(设备像素比=物理像素/设备独立像素)和屏幕宽度来动态改变html的font-size大小。
rem自适应js文件flexible.js:
通俗理解:
就是通过动态获取屏幕宽度控制根元素字体大小,进而控制页面大小比例。flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,就是一个终端设备适配的解决方案。也就是说它可以让你在不同的终端设备中实现页面适配。
用法:
在页面的中引入 flexible.js文件
rem布局小技巧:
①页面中模块间距离一般为0.2rem
②文章字体的大小一般分为四个档次 0.2rem 0.24rem 0.28rem 0.32rem,其他字体可以根据设计图自己测量,然后进行计算
③一般开发移动端都会在最外部写个div,限制页面效果图的宽度。
拿项目举例,例如移动端页面效果图的宽度都定在了640px。于是在项目中,最外层的div样式就设置成了,所有的内容都放到了container里。
flexible.js主要是改变了dpx和document的font-size大小。
大小为docEl.getBoundingClientRect().width / 10 + ‘px’
假设我们的设计稿宽是640的,则html的字体大小则被设为64px.则相当于1rem=64px。
lexible.js
假如一个元素的宽是160px,在平时,我们可以采用百分比可以做到自适应,假如使用响应式的话,可能需要设置多个,比如在320px,输出80px,而在640px输出160px等。而采用以上rem的方法,则只需要输出2.5rem就能实现统一,如下表格:
移动端开发
(1)vw和vh布局–字体大小测量计算即可
(2)rem布局:引入flexible.js自适应文件