鸡西网—微信标志
  • 鸡西网站制作
  • 鸡西网客服热线已更改为”400-0467-004“,请广大客户周知。
  • 鸡西网站设计为您提供免费技术问答.如有您有计算机的相关问题欢迎前来咨询!
  • 敢不敢在鸡西网High一下
  • 网站地图

鸡西做网站 响应式布局Media Queries的常用方法

Html&Css Danny.✔ 3460浏览 0评论 百度收否

响应式布局这个词现在越来越流行了,它的出现,对于鸡西做网站WEB前端的设计还是code,起到了很大的推动作用。随着鸡西网民生活水平的提高,电脑和手机屏幕越来越大,对于产品的用户体验会要求越来越多,这必然导致鸡西做网站行业内各公司的产品竞争越来越烈。

Media Queries.jpg

如果你经常关注到一些鸡西的门户网站,比如淘宝、乐视等, 发现他们现在的网站布局不同分辨率下有着不同的效果,这种技术也是以后的一种趋向了,不仅仅是在PC端,而在我们的移动端,也是如此。现在人手基本一部智能机器,分辨率也是很多种,如何在不同分辨率下,给用户带去更好的体验,作为鸡西做网站的前端人员应该多花点心思了。在项目过程中,我们经常会被产品以及测试人员问到 类似下面的问题:

  • 为什么用三星S4和苹果4/5错位、换行,图片质量太差?
  •  为什么我用笔记本和台式电脑上浏览,效果不一样?
  •  能不能保证在不同分辨率下内容都能充满屏幕啊?

针对以上问题,我们引入Media Queries来解决。你可以针对不同media类型设置表达式,根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式,为mobile设置另外一种 样式。这个功能相当强大,你可以不修改页面内容的情况下,为不同设备提供不同的样式效果。

下面让我们详细讲下如何应用Media Queries吧!

Media Queries

打开Demo页面,调整浏览器的大小,查看页面布局变化情况。

Max Width

当页面视图区域小于600px宽度的时候,css会被使用到。

@media screen and (max-width: 600px) {
.class {
background: #ccc;
}}

你也可以使用下面的方式,在页面的中引用外部css文件。

Min Width

当视图区域大于900px宽度的时候,css会被使用到。

@media screen and (min-width: 900px) {
.class {
background: #666;
}}

多个 Media Queries

你可以把多个media queries组合在一起,当视图区域宽度在600px到900px之间的时候,会使用下面的css。

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}}

设备Width

下面的css会在 max-device-width为480px的时候使用,例如iphone。
注意:max-device-width指的是设备实际分辨率,max-width指的是可是区域尺寸。

@media screen and (max-device-width: 480px) {
.class {
background: #000;
}}

因为ie8以及之前版本的ie浏览器不支持media query,你需要使用JavaScript的hack计较解决问题。下面是一些解决方案:

  • CSS Tricks – 使用jquery判断浏览器尺寸
  • The Man in Blue – 使用Javascript
  • jQuery Media Queries 插件

总而言之,Media Query目前在移动端应用很多,虽然在PC端有些局限性,但以后是鸡西做网站的一个趋向,我们应该更多的去研究它,目的是让我们的项目拥有更好的用户体验。
我们需要注意到,针对mobile做了一个css,并不意味着我们的站点对mobile设备就是优化的。对mobile设备进行优化,网站图片和html代码同样需要缩小尺寸,这样才有益于加载。media query做到的只是设计展现,而不是优化操作。
最后只想说,一个好的产品,必须具备好的用户体验。

转载请注明:七网科技 » 鸡西做网站 响应式布局Media Queries的常用方法

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址