【java技术】视口媒体查询.docVIP

在过去，我们的网站开发只需要针对电脑开始即可，但是现在由于现在终端设备的多样化，如手机，平板。 不仅如此，不同的电脑，手机，平板也有各种不同尺寸。 这就产生了问题了，同一个网站开发出来，遇到了不同的终端。可以会出现各种不同的效果。那么怎么解决这个问题，是很多开发者或者说是设计师一直比较头疼的问题。 当前，最可靠的方式是开发多套网站。即电脑开发一套网站，手机开发一套网站。这样没有问题。我个人认为在预算充足的情况，这么做绝对是首选。 但是，我们能不能做一套网站，让它可以完美的去适应屏幕。即根据我们的浏览器的大小实现自适应，让我的所有设备访问都可以得到一致性的体验。这个可以做到嘛？ 答案当前是可以的。 这就要说到我要给大家说的这一个东西：响应式。 什么是响应式，在网上有很多叫法，我给大家罗列一下： 流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。 好了，上面已经简单介绍了一下响应式。 当然，网上也有很多资料，你也可以去了解。 但是有一个问题，响应式真的好嘛？ 我还真不敢这么说。 因为坊间对响应式也是褒贬不一。要不要使用，也是看开发人员自己的选择。这里，我也可以推荐几个响应式网站，你可以去鉴赏一下。 /zh-cn / / 接下来,我们就讲一下怎么来实现浏览器的自适应响应. 首先,我们要了解一个概念:视口 视口(viewport），即可视区域的大小，是指浏览器窗口内的内容区域，不包含工具栏、标签栏等. 注意,它和我们以前认识的屏幕尺寸不是一个概念.屏幕尺寸指的是设备的物理显示区域，用户屏幕的整体大小. 以iphone为例吧!它的宽度有980,这是不是有点像是人为设置的? 对,这是乔布斯为了让iphone有更好的查看网页的视野设定的. 试想一下! 我们在手机上看的网站应该有哪些特性. 基本上的手机网站,都不会出现横向滚动条,不让用户可以对页面放大缩小. 要实现这个效果,在页面上加上下面这句代码: meta name=viewport content=width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no id=viewport / 属性解释: width=device-width ：宽度是设备宽度 initial-scale=1.0 ：初始大小为1倍 minimum-scale=1.0 ：最小为1倍 maximum-scale=1.0 ：最大为1倍 user-scalable=no：不要进行缩放 然后,我们讲一下媒体查询 先简单说一下这个概念,说得简单点,就是让我们可以根据显示窗口的不同来单独设置样式. 注:媒体查询不支持IE低版本. 举个例吧: 我现在想做一个功能,可以根据我的屏幕大小来修改页面的颜色. 我们来使用外连式的媒体查询,就直接在link标签里加上media这个属性就可以了: 第一步:新建3个css文件 index1.css index2.css index3.css body{ background: red; } body{ background: blue; } body{ background: yellow; } 这三个CSS中都用页面设置了不同的背景颜色 第二步,创建index.html页面,然后使用媒体查询分别引用三个文件 上面就是使用媒体查询的代码,如果看不明白,在每一个引用上还有相应的解释可以参考, 最后出来的效果如下: 小于480 481-768 760以上 接下来我们用同样的例子来讲一下内嵌式: 这个我们就只需要一个CSS样式,然后在样式上加上媒体查询即可.我现在把样式直接写在HTML文件中,给大家演示与参考: 最后出来的效果与上面的外连式相同,这里我就不贴图展示了. 下面,给大家简单讲一下使用我们刚才讲的知识能做的效果. 这里基于bootstrap完成的响应式网站功能,其它几个地方就用到了我们刚才讲的知识. 在上面中,我们的头部导航,轮播图中文字显示,还有下面的音乐部分使用到了媒体查询. 导航的代码与效果： 轮播图的代码与效果 @media?(max-width: 767px) .hidden-phone?{ display:?none !important; } 上面这句@media 是啥意思呢？ 这个是媒体查询的代码，翻译过来意思就是：最大宽度是767px的时候，才使用下面的样式，再简单点：页面小于767px时，.hidden-phone这个样式生效 很神奇吧，我们上图就是页面小于767px时的图，