黄金城集团官网 - 黄金城官网入口

媒体查询响应式网页是这几年很盛行的网页气势派头之一，他能够以一套网页代码，面临差别的条件，例如改变浏览器的宽度，手机横竖屏，作出差别的样式调整。一套代码走天下最着名的响应式框架是Bootstrap，来自Twitter。也是每个刚入门前端开发师必学的框架，使用这个框架可以很轻松实现响应式效果。

面临差别的浏览器宽度，作出界面调整要实现响应式，关键在于使用媒体查询 Media！语法@media （媒体特性）and （媒体特性） {你的样式}看起来似乎很庞大，先看完整的代码@media(max-width:480px){body{background-color:green}}上面这句话的意思，浏览器的宽度小于或即是480px时，配景颜色是绿色。再来多一个，如下@media(min-width:481px){body{background-color:red}}上面这句话的意思，浏览器的宽度大于或即是481px时，配景颜色是红色。媒体特性媒体特性就是依据什么样的条件来举行更改样式，是凭据屏幕宽度巨细、还是横竖屏呢。这些条件都是官方定的，很是多。

但实际上，真正有用的就是 min-width和max-width，凭据浏览器宽度来设定差别的样式。这里会很容易混淆min-width和max-width的意义。min-width表现大于即是，max-width表现小于即是。

@media(max-width: 500px) {/** 窗口宽度小于即是500像素的样式 **/}@media(min-width: 800px) {/** 窗口宽度大于即是800像素的样式 **/}当有多个媒体特性时，用and毗连，就可以形成一个区间规模@media(min-width: 600px) and (max-width: 700px) {/** 窗口宽度在600-700像素的样式 **/}这就是他最基本的用法，通常有两面性，下面来说说他的优缺点。优点（1）面临差别分辨率设备灵活性强（2）能够快捷解决多设备显示适应问题缺点（1）兼容种种设备事情量大，效率低下（2）代码累赘，会泛起隐藏无用的元素，加载时间加长案例全局结构下面这种响应式结构最为常见，通过媒体查询界说差别的样式，让其能够适应手机浏览器和桌面浏览器：1、电脑端大屏幕下，网页元素全部展示电脑端样式2、手机端下，因为屏幕有限，只能让主体内容出现出来，其余部门隐藏起来，而且让字体缩小。

手机端样式栅格结构一提起响应式，绝对离不开强大的栅格结构，凭据浏览器的宽度，设置容器差别的列宽。<divclass="row"><divclass="col-xs-12 col-sm-6 col-md-8"></div><divclass="col-xs-12 col-sm-6 col-md-8"></div></div>只需要根据填写bootstrap参数，即可匹配差别的宽度栅格结构的原理其实也是使用了媒体查询，这样你就可以自界说一份自己的栅格结构。部门源代码总结总结。

本文来源：黄金城集团官网-www.hnqmxc.com