响应式布局— rem介绍、媒体查询介绍、rem和媒体查询结合的布局、flexible.js 的使用
媒体查询
- 可能有一组用于屏幕的样式规则、一组用于打印机的样式规则、一组用于手持设备的样式规则,甚至还有一组用于电视,等等。通过媒体查询你可以针对这些不同的设备设置不同的样式。
- 可能在同一类型的设备上,当浏览器的窗口大小不同时,你可以在不同的尺寸下设置不同的样式,实现响应式布局。
媒体查询可以用于检测很多东西:
- 自动检测 viewpoint(视口)的宽度和高度
- 自动检测设备的宽度和高度
- 旋转方向(智能手机横屏或竖屏)
- 分辨率大小
使用媒体查询是一种流行的技术,可以向台式机、笔记本电脑、平板电脑和手机等(例如 iPhone 和 Android 手机)提供定制的样式表,并且它支持过渡效果。
语法
@media mediatype and|not|only (media feature){ css-code; }
参数:
- 必须是以 @media 开头
- 然后指定设备类型(媒体类型mediatype):all(用于所有设备);print(用于打印机和打印预览);scree(用于电脑屏幕,平板电脑,智能手机等)
- 接着是括号()里的规定媒体特性(media feature),媒体特性的书写格式与css样式类似,都是属性名:属性值:width(定义输出设备中页面可见区域的宽度);min-width(定义输出设备中页面最小可见区域宽度);max-width(定义输出设备中页面最大可见区域宽度)
- 最后跟着的大括号{ css-code },里面放置的是要设置的css样式。
引入方式:
在<style>...</style>
标签里面使用@media
来实现媒体查询
参考下面的标题 案例:
在<style>...</style>
标签上使用media=""
案例:只有当设备宽度大于等于 300px 小于等于 500px 时运用此样式
<style media="(min-device-width: 300px) and (max-device-width: 500px)">
...
</style>
在<link>...</link>
标签上使用media=""
案例:当设备宽度大于等于 300px 小于等于 500px 时运用文件 style1.css 中的样式;当设备宽度大于 500px 时运用文件 style2.css 中的样式
<link rel="stylesheet" href="./style1.css" media="(min-device-width: 300px) and (max-device-width: 500px)"/>
<link rel="stylesheet" href="./style2.css" media="(min-device-width: 501px)"/>
案例:
让元素div,在屏幕宽度小于540px时,宽高为300px,背景色为红色;在屏幕宽度大于等于540px小于970px时,宽高为500px,背景色为绿色;在屏幕宽度大于970px时,宽高为900px,背景色为蓝色;
div { border: 1px solid #000; transition: 0.5s; } @media screen and (max-width: 539px) { div { width: 300px; height: 300px; background-color: red; } } @media screen and (min-width: 540px) and (max-width: 969px) { div { width: 500px; height: 500px; background-color: green; } } @media screen and (min-width: 970px) { div { width: 900px; height: 900px; background-color: blue; } }
rem布局
rem单位,是相对于根元素 <html></html> 的字体大小 进行设置,默认情况下根元素的字体大小为 16px,此时 1rem = 16px。
rem布局的本质是根据设备宽度进行缩放,一般是基于屏幕宽度,先按定宽高设计出来页面,然后转换为rem单位。可以配合 媒体查询 或 js 在不同屏幕下改变 根元素<html></html> 的字体大小,来达到整个页面的缩放。rem是弹性布局的一种实现方式,弹性布局可以算作响应式布局的一种,但响应式布局不是弹性布局,弹性布局强调等比缩放,100%还原;响应式布局强调不同屏幕要有不同的显示,比如媒体查询。
rem与媒体查询的结合使用
我们只需使用 @media 设置不同屏幕宽度下根元素的字体大小,然后在后面元素的像素大小设置中使用 rem 单位。
html{ font-size: 50px; } // 将屏幕宽度划分成15个区间 @media screen and (min-width: 320px){ html{ font-size: 320px; } } @media screen and (min-width: 360px){ html{ font-size: 360px; } } @media screen and (min-width: 384px){ html{ font-size: 384px; } } @media screen and (min-width: 400px){ html{ font-size: 400px; } } @media screen and (min-width: 414px){ html{ font-size: 414px; } } @media screen and (min-width: 424px){ html{ font-size: 424px; } } @media screen and (min-width: 480px){ html{ font-size: 480px; } } @media screen and (min-width: 540px){ html{ font-size: 540px; } } @media screen and (min-width: 720px){ html{ font-size: 720px; } } @media screen and (min-width: 750px){ html{ font-size: 750px; } }
flexible.js的使用
flexible.js 是手机淘宝团队出的简洁高效移动端适配库,我们再也不需要写不同屏幕的媒体查询,因为里面js做了处理。它的原理是把设备屏幕宽度划分成10等份,在不同屏幕宽度下,比例是一致的。我们要做的就是确定好我们当前设备的 根元素<html></html> 字体大小就可以了。
比如当前设计图是750px 那么在写样式时只需要把 html 的字体大小设置为75px (750px/10),然后在后面元素的像素大小设置中使用 rem 单位,这个时候写的样式与设计图就是等比例的。 flexible.js 会实时的计算屏幕宽度并设置根元素的字体大小,从而实现等比缩放。
(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))
vscode插件