媒体查询
媒体查询可以使用@media在css样式当中进行断点 , 让指定的css样式按照要求进行生效
@media (max-width:768px) {
.box {
color : red;
}
}上面写在媒体查询当中的css代码 , 在页面视窗宽度小于768px时生效
根据媒体类型进行断点
- all 所有设备
- print 用于打印机和打印预览
- screen 用于电脑屏幕 平板电脑 智能手机等
- speech 屏幕阅读器等发声设备
逻辑操作符
使用逻辑操作符可以构建复杂的媒体查询 , 有and , not , only等
@media (min-width: 700px) and (orientation: landscape) {
/* 宽度大于700并且横屏的时候应用该效果 */
.box1 { color: red; }
}只用于屏幕显示( 打印输出不生效 )
@media only screen and (max-width:1150px){
div{border:solid 1px;}
}按需加载CSS
其实与上面的媒体查询作用是一样的 , 只不过在页面引入css时添加媒体查询条件
浏览器在执行渲染的时候 , 实际和媒体查询是一样的 , 相当于给整个文件当中的css包装了一层媒体查询
REM
这是一个应用于长度的单位 , 所有可以用长度值来声明的CSS样式 , 都可以以它当做单位 , 比如width , font-size等等
这个单位代表的是相对于html的font-size的值
比如
html {
font-size:100px;
}
body {
/* 为了防止元素继承html的字号,干扰全局样式,所以重置为默认 */
font-size:initial;
}
.box2 {
width : 0.5rem;
}那么box2的实际宽度就是 0.5 × 100px = 50px
基于这种机制 , 我们就可以编写页面resize事件的回调函数
在函数当中获取当前视窗的宽度与高度 , 去动态改变根元素(html节点)的font-size的值
从而让页面中的元素适应视窗大小的变化
( 假定设计稿给出的宽度是750px )
(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 = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);设置viewport的width
这种方案 , 就是直接指定viewport的width大小
但是使用了这种方案之后
因为已经将宽度定死了 , 所以针对宽度执行的媒体查询就会失效
存在很大的弊端
而使用REM方案是可以使用媒体查询的