响应式布局到底是什么？难吗？

2023年4月9日 125次阅读 来源: 懿左左

一、什么是响应式布局？

  响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
  响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

二、响应式布局的优点和缺点有哪些呢？

 (1) 优点 ：1. 面对不同分辨率设备灵活性强
           2. 能够快捷解决多设备显示适应问题
 (2) 缺点 ：1.不能完全兼容所有浏览器，代码累赘，会出现隐藏无用的元素,加载时间加长
           2. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

三、实现原理？

  原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

四、用示例来实践一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style>
        body {
            background-color: #ccc;
        }
        @media screen and (max-width: 1000px) {
            body {
                background-color: red;
            }
        }
        @media screen and (max-width: 800px) {
            body {
                background-color:green;
            }
        }
        @media screen and (max-width: 600px) {
            body {
                background-color: skyblue;
            }
        }
        @media screen and (max-width: 400px) {
            body {
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    这就是简单的响应式布局示例
</body>
</html>

  看完我写的示例，你可以试着敲一下在浏览器里运行，然后缩小浏览器窗口，你就会发现网页的颜色会随着你的浏览器窗口宽度变化而变色，这就是css的媒体查询功能，根据浏览器视口宽度的不同来加载不同的css样式。
  值得注意的是：在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。
  禁止代码如下：

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

（注意的是在页面的头部<head></head>之间加上上面这句。meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。）
 参数设置∶
    width – viewport的宽度
    height – viewport的高度
    initial-scale – 初始的缩放比例
    minimum-scale – 允许用户缩放到的最小比例
    maximum-scale – 允许用户缩放到的最大比例
    user-scalable – 用户是否可以手动缩放

五、注意事项

  响应式布局一定要注意以下两点：

    一 是图片，在移动设备上，要做一些特定适合的小图片来匹配，如果单纯使用压缩的图片会失真，影响用户体验；
    二 是在头部加入如下代码，目的是声明在移动设备上设置原始大小显示和是否缩放

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

  最后说一下通过媒体查询来加载不同的css，这是响应式布局的核心，媒体查询的方法当然也有很多，如果有兴趣深入了解，大家也可以自行百度一下。

    原文作者：懿左左
    原文地址: https://www.jianshu.com/p/6c3e54deae9b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞