1.1响应式布局特点:网页宽度自动调整、尽量少使用绝对宽度、字体的大小使用相对单位(rem、em)、布局尽量使用浮动(流式布局)。
1.2响应式布局核心技术:媒体查询(@media)。
首先在页面里添加meta标签
注:width=device-width:宽度等于当前设备的宽度
initial-scale=1:初始的缩放比例(默认为1)
maximum-scale=1:允许用户缩放到的最大比例(默认为1)
user-scalable=no:用户不能手动缩放
@media[mediatype][and|not|only]([ mediafeature]){
/css code/
}
► 注:常用mediatype
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕、平板、智能手机等
常用mediafeature
max-width 输出设备中页面最大可视区域宽度 小于这个width时,其中的css起作用
max-height 输出设备中页面最大可视区域高度 小于这个height时,其中的css起作用
min-width 输出设备中页面最小可视区域宽度 大于这个width时,其中的css起作用
min-height 输出设备中页面最小可视区域高度 大于这个height时,其中的css起作用
-webkit-min-device-pixel-ratio 设备上最小的物理像素和设备独立像素比,简称设备像素比(DPR )
著名的bootstrap框架就是应用了此种方式来进行栅格布局。虽然使用媒体查询方式去开发页面能实现一套代码满足多端的使用,但是这也正是这种模式的缺点所在,最重要的一点就是兼容各种设备会导致大量累赘的代码,维护与重构较麻烦。
代码如下:
/* 所有设备、宽度必须大于700、横屏,这个三个条件同时满足才为true */
@media all and (min-width:700px) and (orientation:landscape){
/* 注意这里我遇到了选择器权重的问题,所以在媒体查询样式选择器添加了一个media类 */
div.media{
background-color: yellow;
}
}
div{
width: 200px;
height: 200px;
background-color: red;
}
媒体查询的样式代码写在不同css文件中,然后再通过link标签引入,还可以通过在一个主CSS文件中使用@import来引入。
1.在link标签上引入:
<link rel="stylesheet" href="css/200.css" media="(max-width:200px)"></link>
<link rel="stylesheet" href="css/500.css" media="(max-width:500px)"></link>
<link rel="stylesheet" href="css/800.css" media="(max-width:800px)"></link>
2.@import引入:
但是@import存在一些问题,引入样式必须写在主样式文件的最上方,并且不能再html的上设定宽度,否则也不生效。
@import url("css/200.css") (max-width:200px);
@import url("css/500.css") (max-width:500px);
@import url("css/800.css") (max-width:800px);
优点:订制化强
缺点:代码臃肿,不利于维护
布局的传统解决方案是基于盒状模型,依赖display 属性 + position属性 + float属性。它对于某些特殊布局非常不方便。
2009年W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。
flex布局是css3中用于排列元素的一种布局模式,顾名思义,弹性布局中元素的大小是高度依赖父容器的大小的。因为它所具有的“伸缩性”,所以才使得元素能够撑满父元素的空间。不管在移动端还是在PC端,上述方法都可以用来实现部分适配工作。
**优点:目前比较主流的自适应布局方案
缺点:自适应起作用的是flex盒模型内部的元素,flex容器的自适应问题还需要借助其他方案。**
(这种方式常常会配合其他解决方法来结合使用,只考虑到宽度而没有考虑到设备分辨率和端的差别,所以局限性较大。)
文档 npm install postcss-pxtorem --save-dev
场景:页面要实现在不同分辨率,不同设备下,页面布局等比缩放
解决思路:
设置根目录html元素的font-size,其他元素根据根元素,使用rem相对单位,实现等比缩放。
监听浏览器resize,设置根元素html的font-size,其他元素参考html的font-size实现自适应。
代码如下:
/**
* 设置跟节点 fonst-size
*/
export const setRootHtmlFontSize = () => {
const rootHtmlDOM = document.getElementsByTagName('html')[0];
const w = rootHtmlDOM.offsetWidth;
// 1920px为UI图的设计稿尺寸
const fs = Math.round((w / 1920) * 10 * 10) / 10;
rootHtmlDOM.style.fontSize = `${fs}px`;
Vue.prototype.$rootFontSize = fs;
};
/**
* 生命周期 挂载完成
*/
private mounted() {
setRootHtmlFontSize();
this.$nextTick(() => {
window.addEventListener('resize', () => {
setRootHtmlFontSize();
});
});
}
.wrapper {
width: 147.5rem; // 对应实际1475px
height: 73rem; // 对应实际730px
background: rgba(7, 79, 151, 0.8);
box-shadow: 0 2px 90px 0 rgba(0, 0, 0, 0.2);
padding: 5rem;
display: flex;
margin-top: 7rem;
}
这里举一个在项目中的例子来说明rem布局的具体应用。
如果设计图标准是iphone6,那么拿到设计稿的时候一定会发现,完全不能按照高保真上的标注来写css,而是将设计图上的各个值取半,这是因为移动设备分辨率不一样。
设计师们是在真实的iphone6机器上做的标注,而iphone6系列的分辨率是750,实际上我们在开发只需要按照375的标准来。为了节省时间,不至于每次都需要将标注取半,我们可以将整个网页缩放比例,模拟提高分辨率。
以vue-cli框架下的rem布局做一个说明,具体做法有两种,一种为:创建一个文件,这里文件暂且叫做rem.js,里面加入这段代码:
然后在main.js中引入rem.js文件,同时安装postcss-pxtorem
npm install postcss-pxtorem --save-dev
在vue-cli根目录下的.postcss.js文件中写入
另一种是直接安装淘宝推行的lib-flexible,把它替换上一种方法的rem.js即可。
注:这是针对于vue-cli2的脚手架来实现的rem布局。postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem。
优点:可以实现单位换算,与设计稿较容易保持一致。
缺点:一点儿缺陷是需要配合js,实现窗口变化过程中动态调整根节点的基准值。
vw/vh方案:npm install postcss-px-to-viewport --save 文档
可以使用 vw 进行长度单位的有:
1、容器大小适配,可以使用 vw
2、文本大小的适配,可以使用 vw
3、大于 1px 的边框、圆角、阴影都可以使用 vw(在高清屏幕比如Retina屏幕下面显示会无法展示很好的1px线)
4、内距和外距,可以使用 vw
优点:也可以实现单位换算,与设计稿保持一致。(只需要根据设计稿的窗口大小开发,再把尺寸转换成vw和vh就能自动实现不同尺寸窗口元素缩放。)
缺点:1px线这种细致的样式是弱项;需要单独处理,特别是移动端。