媒体查询由一个可选的媒体类型,以及若干个css表达式这两部分组成。
用媒体查询来实现响应式布局。
响应式媒体查询尺寸:
在link标签中写:且src='相应的css名称'
@media screen and (max-width: 768px) 超小屏
@media screen and (min-width:768px) and (max-width: 992px) 小屏
@media screen and (min-width:992px) and (max-width: 1200px) 中屏
@media screen and (min-width: 1200px) 大屏
需要响应式几种类型的设备就写相应个数的css样式。
完整格式:
@media screen and (max-width: 500px) {
gridmenu {
width:100%; }
gridmain {
width:100%;}
gridright {width:100%;}
}
浏览器内核及其前缀:
框架网站推荐:
bootcdn: https://www.bootcdn.cn
bootstrap:
https://www.bootcss.com
https://www.bootstrapcdn.com
mdn: https://developer.mozilla.org