前端—响应式布局

最新推荐文章于 2023-07-14 20:37:08 发布

在校大学生入坑网安ing

最新推荐文章于 2023-07-14 20:37:08 发布

阅读量572

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/sinat_61654365/article/details/129611520

版权

什么叫响应式布局？

响应式布局（Responsive Layout）是一种设计网页的方法，可以让网页根据用户使用的设备的不同屏幕尺寸自动调整布局和显示效果。通过使用响应式布局，设计师可以创建一个灵活的网页，可以在不同设备上提供最佳的用户体验。

通俗的讲就是一套代码可以适配不同的设备。

什么是媒体查询（核心）？

媒体查询（Media Queries）是一种 CSS 技术，可以根据设备的属性或特征来应用不同的样式规则。使用媒体查询可以根据设备的屏幕宽度、高度、方向、分辨率、颜色等属性，为不同的设备提供不同的样式。

媒体查询通常用于响应式设计，使得网页能够根据不同的设备和屏幕尺寸来自适应，提供最佳的浏览体验。例如，当用户使用手机浏览网页时，可以通过媒体查询来调整网页的布局、字体大小、图像大小等，以适应手机的小屏幕。

媒体查询基础语法

@media mediatype and (media feature) {
  /* 样式规则 */
    选择器{
          样式
 }
}

其中，mediatype 表示设备的类型，常用的有 screen（屏幕）、print（打印机）、speech（语音阅读器）等；media feature 表示设备的属性或特征，常用的有 width（宽度）、height（高度）、orientation（方向）、resolution（分辨率）、color（颜色）等。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 示例一:当视口宽度小于等于768px，网页背景是粉色 */
        @media(max-width: 768px){
            body { 
                background-color:pink;
            }
        }
        /* 示例二:当时口宽度大于等于1200px，网页背景色是blue */
        @media(min-width: 1200px){
             body{
                background-color: blue;
             }   
        }

    </style>
</head>
<body>
    
</body>
</html>

书写顺序：

一般建议按照以下方式书写：

先编写不使用媒体查询的样式规则，即默认样式；
接着编写针对较小屏幕设备的样式规则，如手机、平板等；
最后编写针对较大屏幕设备的样式规则，如电脑、笔记本电脑等。

这种书写顺序可以确保默认样式和针对较小屏幕设备的样式优先生效，避免了在样式规则中重复书写某些属性，提高了样式的可维护性。

例如，以下是一种常见的媒体查询的书写顺序：

/* 默认样式 */
body {
  font-size: 16px;
}

/* 针对较小屏幕设备的样式 */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

/* 针对较大屏幕设备的样式 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

在这个例子中，首先定义了默认样式 body { font-size: 16px; }，然后根据屏幕宽度分别定义了针对较小屏幕设备和较大屏幕设备的样式规则。在媒体查询中，使用了 max-width 和 min-width 两种媒体特性，分别表示屏幕宽度不大于和不小于某个值时应用该样式。

在校大学生入坑网安ing

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
4
评论
前端—响应式布局

媒体查询（Media Queries）是一种 CSS 技术，可以根据设备的属性或特征来应用不同的样式规则。使用媒体查询可以根据设备的屏幕宽度、高度、方向、分辨率、颜色等属性，为不同的设备提供不同的样式。媒体查询通常用于响应式设计，使得网页能够根据不同的设备和屏幕尺寸来自适应，提供最佳的浏览体验。例如，当用户使用手机浏览网页时，可以通过媒体查询来调整网页的布局、字体大小、图像大小等，以适应手机的小屏幕。
复制链接

扫一扫