CSS3-响应式设计（媒体查询）@media使用大全-附任务-案例

适配所有的屏幕并不是设计师的事，设计师只会设计一套界面，然后他的工作就完了，剩余的适配工作是前端来完成的。
适配最理想的方式，前端能不能也像设计师一样，只需要开发一套代码即可完成适配。
只写一套代码，可以在多个终端中适配，即只写一套代码，在多个终端到处运行，需要用到响应式设计。

响应式设计

移动端开发适配一个重要的方式：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>

CSS3-响应式设计（媒体查询）@media使用大全-附任务-案例

响应式设计

一、viewport

二、响应式设计（媒体查询）

相关单词

此资源下载链接已被无情的隐藏，请输入验证码解锁：

关于作者：WEB前端老罗-加V：imqdcnn免费咨询答疑

发表回复取消回复

CSS3-响应式设计（媒体查询）@media使用大全-附任务-案例

响应式设计

一、viewport

二、响应式设计（媒体查询）

相关单词

此资源下载链接已被无情的隐藏，请输入验证码解锁：

关于作者：WEB前端老罗-加V：imqdcnn免费咨询答疑

相关文章推荐

发表回复 取消回复

发表回复取消回复