web响应式原理

[toc]

响应式

根据不同的平台来动态展示页面,根据不同的浏览器宽度来调整页面. 通常设为长宽为百分比

网格视图

一个网页宽度一般分为12份,例如bootstrap的栅格系统.

媒体查询

bootstrap的基础:Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果
使用:
– @media 媒体类型and （媒体特性）{你的样式}
@media only screen and (max-width: 768px) {#样式}当屏幕小于768px时就执行样式:
– bootstrap中设置@media 中 col-4 -8的宽度即可实现响应式
– max-width,min-width,使用关键词”and”将多个媒体特性结合在一起
– “not”是用来排除某种制定的媒体类型
– only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的
– orientation：portrait | landscape设置横屏和竖屏的样式展示@media only screen and (orientation: landscape){body {background-color: lightblue;}}