love_rain_girl

改了一下午的小bug,网页是pc端没事 全屏的没有任何的错误,再试用手机打开 右侧就有20像素的空白,我开始以为是元素定位的原因,就一个部分一个部分的找,翻来覆去的 改了好多代码就是不行,想哭的节奏,在用chorme看的时候网页的布局结构 发现在没有给它设置宽度的时候或者给的宽度是100%

的时候,它默认的最小宽度是980px;

就会出现右侧永远差了二十像素,想了想原因还记得上次我写的媒体查询,移动端把它的视区视为980像素宽,也就是说在没有任何设置的情况下那那么它的宽度就是980,而在手机上就会显示少了20像素的样式,现在说解决办法,控制整个页面宽度的最小值 min-width:1000px; 完美解决。


这样再也不会出现有白边了!如果你的网页版心是980 就不用设置了,因为我的是1000,或者有的更宽可以用这个方法

媒体查询

在用bootstrap时了解了一下媒体查询,但是没有深入的看,前几天在慕课网上看了一下系统的介绍。在现在越来越多的屏幕出现,也要求我们前端,适应各种各样的尺寸,让我们在这条道路上越走越远。(其实很苦逼)

      首先媒体查询其实是在css2就已经出现的,而且定义了各种媒体类型,只是用的是可能不太多,或者说因为我没有用:-D,渐渐 的css3出来了而且加入了media Queries 模块,这个模块可以添加媒体查询的表达式,指定媒体的类型,然后根据媒体类型来选择使用的样式,也就是说,在我们在改变页面尺寸的同时,是满足条件的布局样式精确的适用在不同的设备上,增加我们的用户体验。

         

    在现在,很多的设备上,浏览器的尺寸可能是不同的,如果只针对某窗口的尺寸制作网页,在其他设备上就会出现很多问题,如果针对不同的尺寸是做不同的网页,那制作的页面就很多,那么css3的media queries模块就派上了用场,我们只需要针对不同的浏览器窗口尺寸编写不同的样式,,然后浏览器根据不同的窗口尺寸来选择不同的样式。Media Queries已经有好多浏览器支持了(firefox,safari,chrome, opera IE8+)应该都是支持的。

说一下格式

媒体查询很多种,实际我们常用的,link标签,@imput 和css3新增的 @ media这几种,分别的方法:

<link rel="stylesheet" tyle="text/css" hre="style.css" media="screen">

<link rel="stylesheet" tyle="text/css" hre="print.css" media="print">

通过link标签media属性来指定不同的媒体类型。

@import 方法

@import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。

@importurl(reset.css) screen;

@importurl (style.css) print;

在link中的<style>中引用媒体类型方法

<head>

    <style>

        @importurl(style.css) all;

    </style>

</head>

@media 方法

这个方法和@import有点类似,同样也是两种发放

在样式文件引用媒体类型

 @media screen {选择器{/*你的样式代码写在这里…*/}

在head标签中的style中引用

<head>

    <style>

        @media screen {     选择器{/*你的样式代码写在这里…*/} }

 </style>

</head>

基本的介绍就是这些,我自己尝试了一下,大多数的移动浏览器

是没问题的,但是苹果设备上总是得不到想要的效果,我就搜搜了搜,

width,height指浏览器的视区尺寸,device-width,device-height设备尺寸,我们所期望的是视区尺寸和设备尺寸是相同的,这样浏览器的内容将填满整个屏幕,但是这只是我们所想的,不是所有的都是这样的苹果设备就那么听话。

iPhone、iPod touch和iPad在计算宽度时不会考虑方向,而其他设备会。

不过乔布斯设计了一个新的<meta>标记

<meta name="viewport" content="width=device-width, initial-scale=1">

这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度。而且,它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。这样,您可以在媒体查询中安全地使用width,因为您知道它的用途与您所想的相同。

也得到了w3c的批准,而且其他移动设备也广泛采用了。而放心使用。

如何编写媒体查询

设置一个或多个条件的媒体查询

media=“screen and  (min-width: 401px) and (max-width: 600px)"

媒体查询是布尔值:它们要么为true,要么为false。如果整条语句为true,那么将应用样式表。如果为false,将忽略样式表。其实这句话就是说 屏幕在401px-600px之间执行该样式表。

值得注意的是 and后边一定要加空格,样式表不执行别说我没告诉过你。

指定否定条件

media=“not screen and (monochrome)”

不能在单个条件前使用not。该关键字必须位于声明的开头,而且它会否定整个声明。所以,上面的示例会应用于除单色屏幕外的所有设备。

向早期浏览器隐藏媒体查询

媒体查询规范还提供了关键字only,它用于向早期浏览器隐藏媒体查询。类似于not,该关键字必须位于声明的开头。

media="only screen and (min-width: 401px) and (max-width: 600px)"

早起的浏览器会忽略only这样的媒体类型,所以他会将浏览器解释为

media="screen and (min-width: 401px) and (max-width: 600px)"

不幸的是,IE 6–8未能正确实现该规范。没有将样式应用到所有屏幕的设备,它将整个样式表一起忽略。

对处理早期的Internet Explorer版本 我们只需一份写一份不支持媒体查询的样式

使用Internet Explorer条件注释来向早期版本的IE提供一组特殊的规则

<!--[if lt IE 9 & !IEMobile]> 

 <link href="iestyles.css" rel="stylesheet" type="text/css"> 

  <![endif]-->

@import和@media一起使用

@import url("phone.css") only screen and (max-width:400px);

 @media only screen and (max-width:400px) { 

             #navbar {          float: none;          width: 400px;      } 

         }


这样写 以后写响应式的网页,用媒体查询会方便。

+5:

这一套问题还很多。求指导。。。

+5:

音悦台用户给音悦台iphone客户端来了个个性化定制。。。改了点小操作,让使用更加便捷,更加人性化。。。