切换设备
浏览器切换设备步骤:
F12开启控制台,如图:
viewport 视窗的设置
viewport只针对于移动端,PC端无效
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=0" />
content的配置:
width=device-width:宽度等于设备宽度,浏览器宽度分辨率等于系统的分辨率
initial-scale=1:初始化比例是1
minimum-scale=1:最小的缩小比例是1
maximum-scale=1:最大的放大比例是1
user-scalable=no:用户不允许缩放
物理分辨率与逻辑分辨率
物理分辨率:即 标准分辨率,是指 显示屏显示图像的原始分辨率,也叫真实分辨率
逻辑分辨率:即 压缩分辨率,显示屏分辨率
决定图像清晰程度的是物理分辨率,决定显示屏的适用范围的是逻辑分辨率
两者间由 Scale Factor(缩放因子) 计算得到
通常 物理分辨率 > 逻辑分辨率,而 物理分辨率 = 逻辑分辨率 * 缩放因子
但在使用 台式电脑 和 笔记本 的情况下 物理分辨率 = 逻辑分辨率
PC移动端的响应式布局:适用于PC和移动端的界面
一般情况下,一个项目会分为PC端的页面的移动端的页面
所以要获取设备的信息,用户发送请求中包含了信息
如果想要实现响应式布局
可以利用media设置不同分辨率下各种情况的不同样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端与响应式</title>
<style>
.d1{
width: 50%;
height: 200px;
background: skyblue;
/* padding: 10px; */
}
/* 媒体查询 */
/* 移动端设定 */
/* 设定小于600像素时候的样式 */
@media only screen and (max-width: 600px ) {
.d1{
width: 100%;
background: red;
}
}
/* PC端设定 */
/* 设定大于1200像素时候的样式 */
@media only screen and (min-width: 1200px) {
.d1{
width: 33%;
background: greenyellow;
}
}
/* 平板设定 */
/* 设定600~1200px的样式 */
@media only screen and (min-width: 600px) and (max-width: 1200px){
.d1{
width: 50%;
background: purple;
}
}
</style>
</head>
<body>
<h1>hello world</h1>
<div class="d1">响应式1</div>
<div class="d1">响应式2</div>
<div class="d1">响应式3</div>
<div class="d1">响应式4</div>
</body>
</html>
注意:
1、并不是所有的界面都需要移动端和PC端响应,因为如果页面比较复杂,那么代码就会比较凌乱,代码量也会很多。并且不能针对性的设置移动端和PC端的页面
2、使用媒体查询,必须加上meta viewport设置