css基础20

最新推荐文章于 2024-09-30 08:51:48 发布

止语c

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量96

点赞数

分类专栏： HTML和CSS学习之路文章标签：响应式布局媒体查询断点移动端优先网页设计

本文链接：https://blog.csdn.net/weixin_53333752/article/details/128507031

版权

HTML和CSS学习之路专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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>
      /* 
    使用媒体查询
    语法@media 查询规则｛｝ 
        媒体类型
        all所有设备
        print打印设备
        screen带屏幕的设备
        speech屏幕阅读器
    可以使用逗号连接多个媒体设备
    媒体类型前面添加only，主要是为了兼容一些老版本浏览器

    响应式布局
        网页可以根据不同的设备或窗口呈现不同的效果
        可以使一个网页适用于所有设备
        响应式布局的关键是媒体查询
        媒体查询可以为不同的设备或设备不同的状态设置不同的样式
    媒体特性
        width
        height
        min-width视口宽度大于指定宽度使生效
        max-width视口宽度小于指定宽度使生效
      样式切换的分界点称为断点
      小于768超小屏幕
      大于768小屏幕
      大于992大屏幕
      大于1200超大屏幕
    响应式网页的设计
      移动端优先
      渐进增强
        */
    </style>
  </head>
  <body></body>
</html>