利用 @mediaj进行断点, 在每个断点中编写 css;
在浏览器宽度低于 768 时有效, 同理把 max 换成 min, 就会变成高于768 有效, 可以设置为宽度, 也可以设置为高度, 也可以同时设置多个值, 在 media 上, 很多值都可以作为判断的标准, 宽, 高, 宽高比, 颜色(这个是指定输出设备每个像素单位的比特值), 是否横屏或者是竖屏,
@media (max-width: 768px) {
/* css */
}
媒体类型:
@media 还可以根据媒体类型进行断点,
all, 所有的设备, print, 打印, screen, 彩色的电脑屏幕, speech 未知
关键字:
@media (max-width: 768px) {
/* 表示: 当浏览器宽度低于 1000px 时 */
/* css */
}
@media (min-width: 1000px) and (max-width: 1150px) {
/* 当浏览器宽度低于 1000px 时 和 小于 1150px */
/* css */
}
@media only screen and (max-width: 1150px) {
/* 当屏幕上显示 和 宽度小于 1150px */
/* css */
}
@media not print and (max-width: 1150px) {
/* 除了在打印显示外 和 宽度小于 1150px 时 */
/* css */
}
按需 加载 css @media 还可以使用在link标签上
<link rel= "stylesheet" href="css/1.css" media="(max-width: 500px)">
平常响应式网站的开发:
通常使用 flex 宽度尽量使用 百分比, 间距, 高度, 字体大小使用 em; 这样可以很方便的进行大小控制
REM布局:
rem 这个单位, 会根据 html 中的 font-size 的大小来进行转换,
html {
font-size: 100px;
p {
padding-top: 5rem;
}
}
如何计算当前的 html 的font-size 值呢?
如果我们拿到的的是 750px 的设计搞, 那么设置成 当屏幕的宽度为750时, html的font-size 就是 100px(当然这个 100px 是可以随意设置的,设置为100px,是为了我们计算), 然后根据当前的屏幕的宽度(screenWidth) / 750 * 100, 这样就得到了当前屏幕宽度的 font-size 的值;
+function (document, win) {
let documentEl = document.documentElement;
let resizeEvent = "orientatonchange" in window ? "orientationchange" : "resize";
let remCalc = function () {
let clientW = documentEl.clientWidth;
if (!clientW) {
return
documentEl.fontSize = 100 * (clientW/750) + "px"
}
}
if (!document.addEventListener) {
return;
win.addEventListener(resizeEvent, remCalc, false)
document.addEventListener("DOMContentLoaded", recalc, false)
}
}(document, window)
这个方案是直接根据屏幕的宽度进行计算 font-size的, 而淘宝移动端的 rem 方案, 还根据你的 dpr 来计算, 而且会进行整体的缩放, 淘宝的这种方案,会更好;
淘宝的移动端的 REM;
这个很简单, 我们需要加载js就好了;
<script src="http://g.tbcdn.cn/mtb/lib-flexible/%7B%7Bversion%7D%7D/??flexible_css.js,flexible.js">
如果我们将页面的 viewport 中的width 设置写死为 750px;
<meta name="viewport" content="width=750">
具体链接参考方案3;
这样代码中直接使用 px 作为单位;
那么我们将宽度定死之后, 这样会导致我们再写的 media query 将会失去效果;
对比三种方法
1: 响应式的优缺点:
优点: 兼容性好, @media 在ie9以上都是支持的, pc 和 mobile 是一套代码;
缺点: 要写的css 代码会多, 而且各个断点需要做到位
2: REM 布局:
优点: 可以维持整体的布局效果, 移动端兼容性好,不用写多个 css 代码,还能使用 media query;
缺点:单位需改成 rem, 计算比较麻烦, pc 和 mobile 需要分开写
3: 设置 viewport 中 width:
优点: 和rem 差不多,可以直接使用 px;
缺点: 效果没有 rem 好,图片会模糊, 无法在使用 media query, 不同的手机上, height 会相差很大;
