标签： html

CSS3 Media Queries

由Goofy发布在CSS、前端开发、移动端开发在 CSS3 Media Queries上留下评论

转载自：W3CPLUS

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式：

  <style type="text/css" media="screen">
    @import url("css/style.css");
  </style>

不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。

上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的”Media
Queries”的更多使用方法和相关知识，下面我们开始进入今天的主题。CSS3中的Media
Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的
样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个
例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制
作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

首先来看一个简单的实例：

  <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：

1、screen：这个不用说大家都知道，指的是一种媒体类型；

2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；

3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性（Media Query），首先一起来理解一下这两个概念：

一、媒体类型(Media Type)

媒体类型(Media
Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是
all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

页面中引入媒体类型方法也有多种：

1、link方法引入

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

2、xml方式引入

  <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3、@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是
在<head></head>中的<style>…</style>中引入，单这种使用方法在
ie6-7都不被支持 如

样式文件中调用另一个样式文件：

   @import url("css/reset.css") screen;
   @import url("css/print.css") print;

在<head></head>中的<style>…</style>中调用：

  <head>
    <style type="text/css">
@import url("css/style.css") all;
    </style>
  </head>

4、@media引入

这种引入方式和@import是一样的，也有两种方式：

样式文件中使用：

   @media screen{
     选择器{
属性：属性值；
     }
   }

在<head>>/head>中的<style>…</style>中调用：

  <head>
    <style type="text/css">
@media screen{
           选择器{
     属性：属性值；
   }
}
    </style>
  </head>

以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或Ｇ爸，他们能帮你解决。

二、媒体特性（Media Query）

前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：

  <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

转换成css中的写法为：

  @media screen and (max-width: 600px) {
    选择器 {
      属性：属性值；
    }
  }

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){…}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：

1、Media query只接受单个的逻辑表达式作为其值，或者没有值；

2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；

3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况

4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

常用的Media Query如下表所示：

兼容的浏览器：

下面我们一起来看看Media Queries的具体使用方式

一、最大宽度Max Width

  <link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

   <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

三、多个Media Queries使用

   <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query可以结合多个媒体查询，换句话说，一个Media
Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media
Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

四、设备屏幕的输出宽度Device Width

   <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

五、iPhone4

   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的样式是专门针对iPhone4的移动设备写的。

六、iPad

  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，
在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。

七、android

  /*240px的宽度*/
  <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
  /*360px的宽度*/
  <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
  /*480px的宽度*/
  <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

  <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

九、only关键字

  <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media
Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media
Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media
Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media
Qqueries的浏览器，不论是否支持only，样式都不会被采用。

十、其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

  <link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外还有使用逗号（，）被用来表示并列或者表示或，如下

  <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

关于Media Query的使用这一节就介绍到此，最后总体规纳一下其功能，个人认为就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。下一节将会针对Media Queries介绍几个实例，如果感兴趣的朋友记得观注本站的更新。

 

【转】IE6下DIV容器中双Float元素字符重影bug（IE6重复文字bug）

由Goofy发布在CSS、Html、前端开发在 【转】IE6下DIV容器中双Float元素字符重影bug（IE6重复文字bug）上留下评论

转载前说明：感谢作者，我终于找到个说法了，之前因为没有相关资料一直是通过改变代码结构来解决该问题的，现在看到这些总结也总算不会无计可施，同样碰到问题的同学有福了。

转载自：http://www.yuzi.me/Share/ie6floatbug.html

ie6floatbug1

IE7 的web标准之道IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的 市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？

估 计很多的朋友都是因为这个华丽的“重复文字”一词进来的，其实这纯粹是一个bug作为。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字 bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果，你不知道产生原因的话，将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。

测试一下：复制以下代码放IE6下测试

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”author” content=”Yuzi,煜子,网页设计师网站” />
<meta name=”Copyright” content=”Yuzi,煜子” />
<title>IE6重复文字bug</title>
</head><body><div style=”width:200px; height:100px; padding-left:70px;”><div style=”float:left;”></div>
<!–如果是IE6，你将多看到一个“影”字–>
<div style=”float:left; width:200px;”>IE6下DIV容器中双Float元素字符重影</div>
</div>
</body>

下面是测试页面分别在IE6，IE7，IE8，FireFox（火狐浏览器），Chrome（谷歌浏览器），Oepra以及Safari（苹果浏览器）中显示效果截图

ie6floatbug2

通过截图，你会惊讶的看到在IE6中，多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件（bug重现条件）

一个容器包含2两个具有“float”样式的子容器。

第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小3（说到3，这里稍微多说一句——IE7还修正了IE6中的一个bug，bug名字就叫做“3像素bug”）

在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）

为何会出现重影

bug虽然的的确确的存在，但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词，谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来，但是现在仍然没有官方的说法。下面列出来的这两种说法，只是现在网上认可度比较高的而已。

说法一：

IE6浏览器对<!– –>注释的解释存在bug引起的。“3像素bug”的扩展后遗症。

说法二：

其他的一些说法，如何消灭重影 引起的原因，也许我们可以不知道，但是如何消除却是我们一定要关注的。”重影bug”已经在IE7中得到修正，在FireFox和Opera中也不会出现，所以bug的修正主要是针对IE6的。

针对于上文中讲到的“bug重现条件”，如果要修正bug，只要让任何一个条件满足即可。有些网友对IE6 重影bug做出了一些想法及议论。

解决方法一：

改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
此解决方案的评论：疯了！因噎废食的做法。

解决方法二：

减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3，例如将本文示例中第二个子容器的宽度改为197px。
此解决方案的评论：在满足页面布局的前提下可以使用。但是当情况比较复杂的时候，可能实施起来比较困难。

解决方法三：

去掉所有的注释。
此解决方案的评论：最直接的做法，但是“没有注释的代码”，的确不是一个好的代码写作习惯。

解决方法四：

修正注释的写法。将 <!– 这里是注释内容 –>写成<!–[if !IE]>这里是注释内容<![endif]–>
此解决方案的评论：还不错的解决方案，但是并不是每个人都对<!–[if !IE]>这里是注释内容[endif]–>这种注释写法很欣赏。

解决方法五：

在第二个容器后面加一个或者多个<div style=”clear”></div>来解决。
此解决方案的评论：另人感觉很不爽的解决方案，但是的确能解决，影响网页效率。

关于此bug的一些文章资料，其实很早以前就有外国的朋友关注过这个bug，而且在中国也有过一些朋友关注过这个bug。我在写这篇文章的时候，也一定程度上参照了他们的研究成果，在此向研究此问题的前辈们表示感谢。

js复制内容到剪贴板功能

由Goofy发布在Html、JavaScript、前端开发在 js复制内容到剪贴板功能上留下评论
$(document).ready(function(){
$(“#btn_copy”).click(function(){
$(“#TextArea1”).select();
copyValue(“TextArea1”);
})
})
//复制功能
function copyValue(txtid) {
if (isIE()) {
clipboardData.setData(“Text”, document.getElementById(txtid).value);
alert(“您已成功复制了CDKEY！”);
}
else {
prompt(“您的浏览器不支持自动复制，请您手动复制对话框中的内容:”,document.getElementById(txtid).value);
}
}
function isIE(number) {
if (typeof (number) != number) {
return !!document.all;
}
}

Speed Up Your Website

由Goofy发布在交互效率、前端开发、建站相关在 Speed Up Your Website上留下评论

原文地址：http://www.codeproject.com/Articles/26376/Speed-Up-Your-Website-By-Example

说在前面的：这个文章是08年的，比较老了，带着批判和找不同的心态去研究一下，会有收益的。

 

部分翻译：（翻译来自CSDN）

为什么减少请求数量
请求执行顺序：
e.g.: index.htm and then global.css, spring.css, logo.jpg, menu1.jpg, menu2.jpg, menu3.jpg, 1×1.gif, corner1.gif, common.js, validation.js etc…)
在加载页面时，浏览器从URL中（src)中提取头链接href={url},css文件链接和发送每个请求的资源。
大体上，浏览器在每台客户机提出页面请求时只并发下载2-4个资源请求，（取决于http和浏览器版本），一般来说，Firefox要比IE略好一些.
结论：请求与连接越少，则响应越快.
怎样减少请求数量？
减少文件数目（css,js,image)
合并文件（尽可能的）所有的CSS文件尽量合并归一，所有的JS文件尽量合并归一，

使用浏览器缓存
当第一次请求时，减少资源，之后将依靠cache机制，不必再请求资源。
使用”expires”头。

优化html
为什么优化它？
大体来说html只耗20%的时间而其它（CSS，Javascript,images)要消耗80%的时间
html包裹所有的对象（标签控件）和styles，这些都提供与浏览器进行解析,解包和render(生成）.
由于浏览器之争（竞争）和x/html/css的兼容问题.浏览器被设计为两种模式：普通（快模式，信任模式），quirk模式（必须要验证HTML/CSS,找到和”原谅错误”)
怎么优化它？
1.减少下载时间
将冗长的一页尽量载减为多页
2.快速生成render
使用非常简单的设计
standard vs quirk mode两种模式的选择.
建立信任的standard模式（前提，设计者达到专业水平遵循标准)以使得浏览器使用最优化的解析
切换模式为标准模式

移除inline CSS改为外部CSS引用（减少内部脚本书写，如document.write())
如果遵循以上原则：浏览器会在生成内容与应用CSS和脚本改变布局之间踌躇，这种情况下会暂停内容的生成，所以要引用外部CSS，JS。
如果不遵循这条原则：外部文件意味着多了一个外部资源请求，如果主页CSS，JS很少，则用内联，减少请求数，加快响应速度。

减裁内容

少用table,转用div.为什么呢？浏览器不能生成实体控件对象（标签对应）直到捕捉到标签尾ie.</table>

若布局用bigger outer，（超多标签）

 

优化image
为什么要优化？
image消耗大量下载时间及带宽，在这方面节省时间会得到卓著的功效。
怎样优化？
1.减少图片的使用频率
2.使用css rollovers代替图片链接。
3.设置恰当的宽度与高度（尽量小）
4.仔细地选择图片的颜色与格式;
GIF: works best for solid colors and sharp-edged transitions from one color to other, Maximum colors: 256.
JPEG: works best for continuous gradations of many colors or grey tones.

 

5.避免动画与flash
6.背景尽量用颜色而不用图片
7.不要把图片放在服务器的多个目录上，（避免在两个请求中，得不到最优从第一次缓存图片）
8.在下载大图片时用进度条掩饰，这是个小把戏，但不会引起用户的反感.
9.尽量使用小于10kb的一张图片，尽量不要把大图裁成小图，因为这样会增加request的次数。
使用CSS Sprites或image maps代替
可以把零碎的一些小图拼成一张大图，然后使用css sprites或image maps。

 

【转】网站默认图标shortcut icon和icon的区别

由Goofy发布在Html、交互效率、前端开发在 【转】网站默认图标shortcut icon和icon的区别上留下评论
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"><
link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

建议包含上面两行HTML代码，可以支持ico格式的图标

然而，只有第一行是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）；而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。

在HTML中，link元件必须在head元件里（在<head>和</head>之间)。

对于XHTML，link必须使用“ />”结束（或“></link>”），而不可以使用“>”结束。

href可以，但不必，指向/favicon.ico的位置。它可以指向任何URL。

图像通常可以使用任何被浏览器支持的图像格式。

.ico文件格式通常可以被所有可以显示favicon的浏览器读取。

设置服务器，以发送正确的MIME标识：
ICO 文件 image/vnd.microsoft.icon（或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型，因为多数主流浏览器现在支持它）
GIF 文件 image/gif
PNG 文件 image/png

使用适当的分辨率和色深。
ICO：包括多种分辨率（最常使用的是16×16和32×32，Mac OS X有时使用64×64和128×128）以及位深（比特每像素）（多数使用4、8、24 bpp，即16、256和1600万色）。
GIF: 使用16×16，256色。
PNG: 使用16×16，256色或24位。

注意：当favicon.ico被置于文档根目录时，将会被一些不处理link元件的浏览器找到，即使没有您的站点上没有指向它的链接。

标准化

Favicon 功能最早由微软创设，而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium（W3C，万维网联盟）的HTML建议[1]，因为：

rel属性必须包含一个用空格作分隔符的link类型的列表，所以一个包含两词的link类型不能被遵守标准的浏览器理解。
“.ico”文件类型（一种用于Microsoft Windows上图标的光栅格式）没有一个注册的MIME类型，而且似乎在当时也不能被多数浏览器理解。然而2003年，这一格式在IANA获得注册，其 MIME类型是image/vnd.microsoft.icon，进而消除了此问题的第一部分。
在网站上使用保留地址（reserved location）与Architecture of the World Wide Web（互联网的结构）矛盾，同时被认为是link squatting（链接劫持）或URI squatting（URI劫持）。

Mozilla 浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel=”icon”并允许网络设计人员添加任何支持的图像格式的 favicon。例如<link rel=”icon” type=”image/png” href=”/path/image.png”>。后来鉴于此功能将被用于所有新内容，多数浏览器都对此功能增加了支持。

IE6,IE7下图片缩放失真解决方法

由Goofy发布在Html、UI相关、前端开发在 IE6,IE7下图片缩放失真解决方法上留下评论
  1. 通过加载微软urn:schemas-microsoft-com:vml命名空间中的VML技术来实现失真的处理，看下面代码。
  2. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  3. <!–[if IE 6]>
  4. <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  5. <![endif]–>
  6. <htmlxmlns=”http://www.w3.org/1999/xhtml”>
  7. <metahttp-equiv=”Content-Type”content=”text/html; charset=utf-8″/>
  8. <head>
  9. <title>VML</title>
  10. <!–[if IE 6]>
  11. <style type=”text/css”>
  12. .vml{ behavior: url(#default#VML);}
  13. .iefix {display:none!important;}
  14. </style>
  15. <![endif]–>
  16. <styletype=”text/css”>
  17. img.iefix {-ms-interpolation-mode: bicubic;}
  18. </style>
  19. </head>
  20. <body>
  21. <!–[if IE 6]>
  22. <v:image src=”1.jpg” class=”vml” style=”width:500px;height:400px;display:block” />
  23. <![endif]–>
  24. <imgsrc=”1.jpg”class=”iefix”style=”width:500px;height:400px;display:block”/>
  25. </body>
  26. </html>