适配所有的屏幕并不是设计师的事，设计师只会设计一套界面，然后他的工作就完了，剩余的适配工作是前端来完成的。
适配最理想的方式，前端能不能也像设计师一样，只需要开发一套代码即可完成适配。
只写一套代码，可以在多个终端中适配，即只写一套代码，在多个终端到处运行，需要用到响应式设计。
响应式设计
移动端开发适配一个重要的方式：PC端和移动端使用的HTML一模一样的，CSS3也是一模一样的。
但是移动端开发的复杂性：屏幕众多，适配所有的手机屏幕+平板。
适配所有的屏幕并不是设计师的事，设计师只会设计一套界面，然后他的工作就完了，剩余的适配工作是前端来完成的。业内一般是根据iPhone6、7、8，即4.7寸的屏幕来设计界面的（750px*1334px 物理像素）
适配最理想的方式，前端能不能也像设计师一样，只需要开发一套代码即可完成适配。
只写一套代码，可以在多个终端中适配，即只写一套代码，在多个终端到处运行，需要用到响应式设计。
终端：PC端、移动端端、手表、智能眼镜等。
真相：把移动端开发想象成是在手机上看的页面。而且移动端开发要比PC端开发要简单。
响应式设计开发要解决的4个问题：
- 添加viewport
- 如何写响应式代码（媒体查询 @media）-CSS3
- 网页内容布局（弹性布局、盒模型、定位、浮动）
- 图片适配（自适应。宽度设为100%）
一、viewport
viewport在移动端页面有什么用？ 在PC端是没有任何影响的。
viewport就是显示网页的那个区域大小（屏幕大小）
在移动端中，默认的网页大小（viewport）是980px。
那么我们就需要告诉移动端设备，让它以设备的宽度来显示网页，而不是980px这个固定的。方法就是添加viewport，重置改为让它以自己本机的大小来显示（理想分辨率）
/*只要涉及移动端开发，就添加以下代码到head标签内*/
/*简单版*/
<meta name="viewport" content="width=device-width,initial-scale=1" >
/*完整版*/
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" >
/*参数说明*/
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。一般不写
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 加了viewport的页面 -->
<!-- 只需要记住一件事件： 不管写什么页面，特别是在移动端，一定要加上这行代码-->
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>viewport测试</title>
</head>
<body>
<p>没有设置viewport，用来测试PC与移动端的显示</p>
<img src="https://www.imqd.cn/wp-content/uploads/2022/05/641cfa0a6b78a3cc0c29.jpg" width="300">
</body>
</html>二、响应式设计（媒体查询）
针对不同的分辨率使用不同的样式。
媒体查询的原理：类似于JS的if语句，通过写不同的条件，然后用不同的样式代码，从而实现不同的页面布局。
媒体查询可用于检测很多事情，例如检测屏幕的类型，尺寸大小，朝向、分辨率等：
a、viewport(视窗) 的宽度与高度
(max-width:600px)
b、设备的宽度与高度
(max-device-width: 480px) 设备输出宽度
c、朝向 (智能手机横屏，竖屏) 。
(orientation:portrait) 竖屏-默认
(orientation:landscape) 横屏
d、分辨率
max-width:720px
1、第一种写法，在样式中写@media，可以认为是特殊的选择器，只会在满足条件的屏幕下生效
//媒体查询类似于js的if语句
if(screen && min-width=768px){
}
//css3版的if语句-在页面样式或外部样式中写
@media screen and (min-width:768px) and (max-width:1024px){
//这里写满足以上条件时，要写的样式
//这里写的代码就是平常写的css代码，以前怎么写现在也怎么写
.demo{
color:red;
}
}示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*可以默认PC端样式，其他的通过媒体查询来写*/
div{
color: #333;
}
/*页面的媒体查询的写法*/
/*手机 and关键字后面一定要空格*/
@media screen and (max-width: 767px) {
div{
color:red;
}
}
/*平板*/
@media screen and (min-width:768px) and (max-width: 1024px) {
div{
color:blue;
}
}
</style>
</head>
<body>
<div>
在PC端是黑色
<br>
在平板是蓝色
<br>
在手机上是红色
</div>
</body>
</html>2、如果是PC端导入PC端的样式文件，如果是手机端导入手机端样式文件，即按需导入，则需要了解第二种写法
//该iphone.css只能在768的分辨率下生效
<link rel="stylesheet" href="iphone.css" media="screen and (max-width:767px)" />
//平板下生效
<link rel="stylesheet" href="ipad.css" media="screen and (min-width:768px) and (max-width: 1024px)" />
//通用写法，即不区分PC端、移动端等：
<link rel="stylesheet" href="iphone.css" /> 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动端开发第一个步骤：首先吧viewport加上 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- pc端 -->
<link rel="stylesheet" href="css/pc.css">
<!-- 手机 -->
<link rel="stylesheet" href="css/iphone.css" media="screen and (max-width:767px)" />
<!-- //平板下生效 -->
<link rel="stylesheet" href="css/ipad.css" media="screen and (min-width:768px) and (max-width: 1024px)" />
</head>
<body>
<div>
在PC端是黑色
<br>
在平板是蓝色
<br>
在手机上是红色
</div>
</body>
</html>3、检测横竖屏
/*朝向 (智能手机横屏，竖屏) 。
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
*/
//竖屏
@media screen and (orientation:portrait) {
竖屏的样式代码
}
//横屏
@media screen and (orientation:landscape){
横屏的代码
}示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*可以默认PC端样式，其他的通过媒体查询来写*/
div{
color: red;
}
/*如果是横屏,可以结合分辨率一起使用*/
@media screen and (orientation:landscape) {
div{
color:blue;
}
}
/*横屏+最大分辨率为1024*/
@media screen and (orientation:landscape) and (max-width: 1024px) {
div{
color:green;
}
}
</style>
</head>
<body>
<div>
在手机上竖屏是红色
<br>
横屏是蓝色
</div>
</body>
</html>相关单词
- viewport 视口。屏幕显示的区域（屏幕大小）
- media 媒体
- screen 屏幕
- and 并且，和
- orientation 朝向
- landscape 横屏
- portrait 竖屏
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
