页面的适配,就是一个页面能在PC端正常访问,同时也可以在移动端正正常访问。
现在我们可以通过弹性布局【Flexible布局】、媒体查询和响应式布局。除此之外,还可以通过rem和vw针对性地解决页面适配问题。
响应式布局的核心,就是一个网站可以 兼容多个终端,而不是每一个终端都得开发一个独立的版本。
响应式布局,主要是通过可视区和媒体查询来完成。
在HTML的head标签中的meta标签来设置浏览器的可视区域。
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
在没有摄者浏览器的可视区域前,H5调试效果是这样的:
设置可视区域后,效果是这样的:
像素,也就是px,是图像显示的基本单位,每一个像素可以有颜色数值和位置信息,每一个图像是由无数个像素组成。
物理像素,是设备屏幕拥有多少个像素,主要是和渲染的硬件有关,比如iPhone 6总共有750*1334个物理像素。
CSS像素,就是逻辑像素,是软件程序系统使用的像素。逻辑像素最终会转化为物理像素的。
物理像素和逻辑像素之间的转换,可以通过window.devicePixelRatio来设置【window.devicePixelRatio是一个物理像素和逻辑像素的比例】
一般的屏幕使用1个物理像素来渲染一个逻辑像素,这是后window.devicePixelRatio的值为1。
有一些高清的屏幕,比如苹果的Retina屏幕,使用2个或者3个物理像素来渲染一个逻辑像素,这样屏幕更清晰。
浏览器厂商提供了一种虚拟的布局视区来解决页面在手机上显示的问题,通过meta标签设置Viewport来修改。比如:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
当有的浏览器不支持user-scalable=no的时候,可以通过JavaScript来控制,比如:
window.onload = () => {
document.addEventListener("touchstart", function (event) {
// 两个手指操作
if (event.touches.length > 0) {
event.preventDefault();
}
});
let lastTouchEnd = 0;
document.addEventListener("touchend", function (event) {
let now = (new Date()).getTime();
// 判断是否是双击,两次间隔小于300ms,认为是双击
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
})
}
了解了浏览器的可视区域后,接下来就是媒体查询了。
所谓的媒体查询就是告诉浏览器根据不同的条件,渲染不同样式规则。
媒体查询在CSS中设置,以@media开头,然后指定媒体类型,也就是设备类型。随后指定媒体特性,中间用and链接。
完整的语法如下:
@media 媒体类型 and (媒体特性){
css样式
}
@media 媒体类型 and (媒体特性),媒体类型 and (媒体特性){
css样式
}
另一种方式是直接在link标签中定义,比如:
<link rel="stylesheet" media="媒体类型 and (媒体特性)" href="example.css" />
CSS中的媒体类型为:
逻辑运算符包括not、and和only。
not运算符用来对一条媒体查询条件的结果进行取反,用来排除某种指定的媒体类型。
only运算符用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器
@media not all {}
@media not print and (min-width:700px) {}
@media only screen and (min-width: 401px) and (max-width: 600px) {}
/* 在支持媒体查询的浏览器中等于*/
@media screen and (min-width: 401px) and (max-width: 600px) {}
/*如果想用于最小宽度为700像素或者横屏的手持设备上*/
@media screen (min-width:700px),handheld and (orientation:lanscape) {}
这就是响应式布局的基本配置。