[前端积累]--响应式布局（一）

响应式布局（一）

 

首先提到响应式布局，需要先了解什么算响应式布局，

1. 首先，需要对不同的屏幕进行不同的布局，通过@media query来实现这个功能；
2. 其次，在一定范围内，要通过rem和em做弹性布局来适应页面的变化；
3. 然后，通过对不同分辨率的屏幕设计不同的布局，来适应各类设备；
4. 在布局上可以参考使用bootstrap框架实现一定程度上的自适应问题；
5. 图片的分辨率可以通过使用ps导出多种分辨率的图片，在不同大小的屏幕上分辨选择加载；

今天首先解决@media query 的使用。

在html的头部要确保加入了以下声明代码，

<meta name="viewport" content="width=device-width,initial-scale=1.0">

在 HTML 中，meta 标签没有结束标签，meta标签定义了与文档相关联的名称或值。可提供有关页面的元信息。

width=device-width 样式中定义的宽度等于设备中定义的宽度

initial-scale=1.0 缩放比例1

minimum-scale=1.0 最大缩小比例1

maximum-scale=1.0 最大放大比例1

使用方式：

在css文件或<style></style>标签中如下例：

@media screen and (max-width: 500px) {

    background-color: #f0f0f0;

}