响应式网站设计
响应式开发原理
响应式开发就是使用媒体查询
针对不同宽度的设备进行布局和样式的设置,从而适配不同的设备
设备的一般划分情况如下:
- 小于768的为超小屏幕(手机)
- 768~992之间的为小屏设备(平板)
- 992~1200之间的为中屏设备(桌面显示器)
- 大于1200的为宽屏设备(大桌面显示器)
媒体查询
介绍
媒体查询(Media Query)是CSS3新语法。
主要是使用 @media
查询,可以针对不同的媒体类型定义不同的样式、针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询