响应式布局学习

最新推荐文章于 2024-03-13 14:48:10 发布

道雄

最新推荐文章于 2024-03-13 14:48:10 发布

阅读量232

点赞数

本文链接：https://blog.csdn.net/qq_36836277/article/details/86607241

版权

1.诞生背景

移动式妆容粗事了响应式布局的产生。

2.分辨率的概念

显示器所能显示的像素的多少。一般而言，分辨率越大，显示的信息越多，可视区域就越大，屏幕越大。

3.响应式布局的优点和缺点

优点：解决了设备只见的差异化展示
缺点：兼容性代码多，工作量大，加载速度受影响。
对原有布局会产生影响。
4.响应式设计的原则
移动优先：
渐进增强：充分发挥硬件设备的最大功能。
在这里插入图片描述
上面三种浏览器不支持css3.

2.1实现方法介绍

（1）css3-Media Query最简单的方式（一般市场上的产品都会支持css3属性，尽管不多，但也管用）
（2）借助原生Javascript：成本高，不推荐使用
（3）第三方开源框架：可以很好地支持浏览器（boostrap）

2.2css3-media Query

常见的属性：
device-width,device-height_设备实际的宽和高（屏幕宽高）
width，height——渲染窗口宽高，浏览器的宽高
orientation——设备方向
resolution——设备分辨率
基本语法：
外联样式表，和内嵌样式表
例子：`
link.css:

body{background: red}

响应式demo.html

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)"/>
        <style>
            @media screen and (min-width:480px){
                body{
                    background: blue;
                }
            }
        </style>
    </head>
    <body>
    </body>
</html>

3.1响应式布局之boostrap基本介绍：

上面介绍的media方法是一种很简单的设置方法，但是在实际中，这种简单的设计远远不能满足我们的要求。我们需要借助框架，框架不仅解决了某些低端浏览器不支持css3属性的特点，还能解决不同设备分辨率不同的问题。
bootstrap是一个移动优先的前端框架，可以实现些非常少的代码，即可实现多终端的页面适配。
**注意：**如果页面最后也需要在ie8以下的浏览器上使用，那么就需要在引入robber.js.