响应式布局基本介绍
可以为不同终端的用户提供更加舒适的界面和更好的用户体验,但他的优缺点也非常的明显
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长, 多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
Media Query（媒介查询)响应式布局的强大工具
媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中
media query能够获取的值
设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。
语法结构及用法
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}
逻辑关键字：
only限定某种设备类型
and逻辑与，连接设备名与选择条件、选择条件1与选择条件2
not排除某种设备
,设备列表
可用设备名参数
width<length>视觉屏幕/触摸设备yes定义输出设备中的页面可见区域宽度(单位一般为px)
heigth<length>视觉屏幕/触摸设备yes定义输出设备中的页面可见区域高度(单位一般为px)
device-width<length>视觉屏幕/触摸设备yes定义输出设备的屏幕可见宽度(单位一般为px)
device-heigth<length>视觉屏幕/触摸设备yes定义输出设备的屏幕可见高度(单位一般为px)
orientationportrait | landscape位图介质类型no定义’height’是否大于或等于’width’。值portrait代表是，landscape代表否即设，备手持方向：portait为横向，landscape为竖向
aspect-ratio<ratio>位图介质类型yes定义’width’与’height’的比率，即浏览器的长宽比
device-aspect-ratio<ratio>位图介质类型yes定义’device-width’与’device-height’的比率，即设备屏幕长宽比。如常见的显示器比率：4/3， 16/9，16/10
color<integer>视觉媒体yes定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index<integer>视觉媒体yes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome<integer>视觉媒体yes定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution<resolution>位图介质类型yes定义设备的分辨率。如：96dpi，300dpi，118dpcm
scanprogressive | interlace电视类no定义电视类设备的扫描工序， progressive逐行扫描，interlace隔行扫描
grid<integer>栅格设备no用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否
关于视口的问题 viewport
移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的 , 可以在网页的中添加下面这行代码：width=device-width 视口为设备宽度(就是人设置的一个宽度)//不设置的话默认为980pxinitial-scale=1.0 初始化的视口大小是1.0倍maximum-scale=1.0 最大的倍数是1.0倍user-scalable=0 不允许缩放视口这个视口的标签告诉浏览器怎么渲染网页。在这里，标签想表达的意思是：按照设备的宽度(device-width)来渲染网页内容
下面直接上例子:
注意: 使用响应式, 需要在网页的meta里面添加下面的这行代码,大比较这按设备的尺寸来进行是视口设置
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
这样就可以根据不同的设备来适配不同的屏幕尺寸, 当然也可以将width设置成固定的尺寸,比如width=750px,那么这样, 只有将width写成750才是全屏, 相当于将所有设备都设置了固定的宽度, 显示在不同设备上是不行的
直接上个例子代码
下面就是通过media来进行判断
/*媒体查询，设定不同屏幕下banner和hbanner的样式*/
当浏览器的可视区域小于1100px
@media only screen and (max-width:1100px ) {
.banner{
height:595px;
}
}
当浏览器的可视区域小于740px
@media only screen and (max-width:740px ) {
.banner{
height:445px;
background-size: 80%;
}
.hbanner{
height: 1020px;
flex-direction: column;
}
.hbanner .banner:nth-child(1),.hbanner .banner:nth-child(2){
width: calc(100% - 20px);
margin: 10px;
}
}
网友评论