响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
设备的划分情况:
-
小于768的为超小屏幕(手机)
-
768~992之间的为小屏设备(平板)
-
992~1200的中等屏幕(桌面显示器)
-
大于1200的宽屏设备(大桌面显示器)
-
响应式布局容器
-
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
父容器版心的尺寸划分
-
超小屏幕(手机,小于 768px):设置宽度为 100%
-
小屏幕(平板,大于等于 768px):设置宽度为 750px
-
中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
-
大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
-
媒体查询语法
样式表中的CSS媒体查询(语法)
@media not|only mediatype and (expressions) and(expressions)...{ CSS-Code; }
-
mediatype:设备类型;
-
express