响应式开发@media媒体查询

最新推荐文章于 2024-05-17 14:38:22 发布

桃花朵朵开3

最新推荐文章于 2024-05-17 14:38:22 发布

阅读量298

点赞数 1

分类专栏：小白笔记文章标签： html5 css

本文链接：https://blog.csdn.net/qq_48445738/article/details/108939065

版权

小白同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

笔记

36 篇文章 0 订阅

订阅专栏

什么是响应式网站？

就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计

响应式网站的中心思想

flexible   grid   layout    弹性网格布局
flexible   image    弹性图片
media queries   媒体查询

响应式网站的优点：

减少工作量
网站、设计、代码、内容都只需要一份
多出来的工作量只是JS脚本、CSS样式做一些改变
节省时间
每个设备都能得到正确的设计
搜索优化

响应式网站的缺点：

会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本浏览器兼容不好

我们今天的主要了解媒体查询

//查询宽度为750px-1200px
@media all and (min-width:750px) and (max-width:1200px){
...
}

and-----与-------全部匹配
or-------或-------任意条件匹配
not------非

CSS3媒体查询属性简介：

设备属性(个人理解 @media 后写的属性)

screen 计算机屏幕（默认）。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备（低分辨率、有限的滚屏能力）。
projection 放映机。
handheld 手持设备（小屏幕、有限带宽）。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

条件属性(个人理解)

width:视口宽度
height：视口高度
device-width：渲染表面的宽度，就是设备屏幕的宽度
device-height：渲染表面的高度，就是设备屏幕的高度
orientation：检查设备处于横向还是纵向
aspect-ratio：基于视口宽度和高度的宽高比 width/height 如：16/9，4/3
device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度
color：每种颜色的位数bits 如：min-color：16位，8位
resolution：检测屏幕或打印机的分辨率如：min-resolution
以上属性都可以添加min-或max-前缀

viewport视口(概念了解即可)：

布局视口（layout viewport）宽度不变的
可视视口（visual viewport）显示布局视口的不同内容
理想视口（ideal viewport）理想视口就是布局视口在一个设备上的最佳尺寸
理想视口就是为构建手机浏览器优化的页面而添加

下面我们开始写一个简易的响应式案列

首先页面是这样的

当我们屏幕宽度大于1200px 的时候我们显示上面这个样式
在这里插入图片描述

当屏幕宽度小于1200px的时候我们需要把中间的内容改变样式
我们在css样式表中添加媒体查询

 @media all and (min-width: 750px)and (max-width: 1200px) {
            /* 内容盒子 */
            section {
                background: lightcoral;
                color: white;
            }
        }

当我们屏幕缩小到1200px ----750px之间的时候字体改成了白色背景改成了浅红色

在这里插入图片描述
那我们还可以接着写一个当在750px – 375px之间的时候我们把样式改成黑底白字

 @media all and (max-width: 750px)and (min-width: 375px) {
            section {
                background: black;
                color: white;
            }
        }

在这里插入图片描述
当我们小于375的时候我们给它把中间的内容变成竖着排列

  @media all and (max-width: 375px) {
            section {
                background: red;
            }

            section {
                height: 200px;
            }

            section aside {
                width: 100%;
                float: none;
            }

            section div {
                width: 100%;
                float: none;
            }
        }

在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X -UA-Compatible" content="ie=edge">
    <title>简易响应式</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100%;
        }

        footer,
        section,
        header {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: blueviolet;
        }

        section {
            background: chartreuse;
        }

        section aside {
            width: 50%;
            float: left;
        }

        section div {
            width: 50%;
            float: left;
        }

        @media all and (max-width: 375px) {
            section {
                background: red;
            }

            section {
                height: 200px;
            }

            section aside {
                width: 100%;
                float: none;
            }

            section div {
                width: 100%;
                float: none;
            }
        }

        @media all and (max-width: 750px)and (min-width: 375px) {
            section {
                background: black;
                color: white;
            }
        }

        @media all and (min-width: 750px)and (max-width: 1200px) {
            /* 内容盒子 */
            section {
                background: lightcoral;
                color: white;
            }
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        header
    </header>
    <!-- 主体内容 -->
    <section>
        <!-- 左边栏 -->
        <aside>
            aside
        </aside>
        <!-- 右边栏 -->
        <div>
            div
        </div>
    </section>
    <!-- 底部 -->
    <footer>
        footer
    </footer>
</body>

</html>

所以简易的响应式案列就做完啦！！拜

桃花朵朵开3

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
响应式开发@media媒体查询

什么是响应式网站？就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计响应式网站的中心思想flexible grid layout 弹性网格布局flexible image 弹性图片media queries 媒体查询响应式网站的优点：减少工作量网站、设计、代码、内容都只需要一份多出来的工作量只是JS脚本、CSS样式做一些改变节省时间每个设备都能得到正确的设计搜索优化响应式网站的缺点：会加载更多的样式和脚本资源设计比较难精确定位和控制
复制链接

扫一扫