响应式布局一个网页在不同设备显示不同效果）meta:vp

布局方式

固定宽度布局：width: 12px;height: 13px;---------在不同的设备上不适应

流式布局：百分比设置宽度----------------具有弹性，会出现错位

响应式布局------------检测设备的信息，设备宽度不同，布局效果更好

混合使用

响应式布局

媒体查询（响应式布局其中的一种方式）

media query------------设定网页布局的时候要先检查一下显示设备它的尺寸和宽度

-----------------------------根据不同的显示设备来显示不同的样式设定

viewport视口：显示网页的区域-不同的设备视口不同

1. 在pc端：布局视口-width
2. 在移动设备（手机）设备视觉视口--device-width

响应式布局约定：

        视觉视口=布局视口

        不可缩放

通过是由meta标签的设定完成的

meta：网页的原数据 可以通过name属性去取不同的值，完成不同的网页的基本数据的设定

width=device-width将布局视口的宽度和设备视口的宽度统一在一起

user-scalable=0//scala缩放的意思 不可缩放

initial-scale=1.0//初始缩放=1表示没有缩放

maximum-scale=1.0

minimum-scale=1.0

使用快捷键：meta:vp

设备的屏幕宽度

超小屏extra small <768px

小屏 small 768<= small<992

中屏medium  992<=medium <1200

大屏large >=1200

根据不同的屏幕宽度，进行媒体查询，完成响应式布局 

min-width: 页面最小宽度

max-width: 页面最大宽度

min-height: 页面最小高度

max-height:  页面最大高度

注意：

1. and前后带有空格 否则无法正确解析
2. 媒体查询的顺序是从上到下进行执行（具有一个覆盖的效果--为了有一个正确的顺序效果，让屏幕尺寸依次增大 或者依次减小）

 

 

 

 

第三方开源框架 bootstrap--完成相应式布局

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