河南蓝鸥

接下来的几天，小编都将会给大家分享一下来自蓝鸥郑州HTML5培训关于前端开发的技术分享，理论和实际相结合，学习起来更轻松，学不会，下面还有邮箱地址，老师也会免费为你解答。

什么是响应式布局?

通俗的说就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。

通过不同的媒介类型和条件定义样式表规则。

媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。

响应式布局的核心就是媒体查询。

媒体查询语法

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

media="only screen and (max-width:700px)"

通过代码练习来验证不同的屏幕宽度来使用不同的css样式表(详见练习11 - 1)。

媒体查询的几种方式：

下面来看一个demo实例效果：(以一个桌面端效果为例)

以此种方式来适配不同的屏幕宽度，适应不同的布局样式;

是不是很简单呀，你学会了吗?

QQ：2290909800 QQ交流群：493076664;97682894；咨询电话(Phone)：0371-55397597 15838221845(手机)
地址（Address）： 郑州市高新区莲花街牡丹路教育科技产业园区B座 网址（website）：http://hn.lanou3g.com/zt/h5Web/