什么是响应式布局

响应式布局：同一张网页在不同设备上显示不同的样式，可以很友好的匹配多个终端设备

一、布局方式

1、固定宽度布局

主流宽度有：960px/980px/1190px/1210px

2、流式布局：百分比设置相对宽度

3、响应式布局：检测设备信息，设备宽度不同，布局不同，阅读体验好

4、几种方法混用

二、响应式布局

实现方法：

1、Media Query 媒体查询

由CSS3中提取出来的一些规则和属性完成对不同设备进行不同样式的设定

Viewport视口

视口：显示网页的区域。

视口规定：

布局视口=设备视觉视口，不可缩放

meta:vp扩展

Ctrl+E即可完成扩展

根据设备宽度设置CSS样式

设备屏幕  尺寸

超小屏（extra small)  <768px

小屏small                  >=768px

中等medium              >=992px

大屏large                 >=1200px

注意：and 前后一定要带有空格否则无法解析
属性：
min-height    页面最小高度
min-width     页面最小宽度
max-height    页面最大高度
max-width     页面最大宽度

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！