本文目录一览：
- 1、css3-mediaqueries不起作用，怎么用啊？
- 2、低版本 IE 支持 CSS3 最佳途径是用 css3-mediaqueries，js 吗
- 3、如何使用CSS3 Media Queries技术创建wap网站
css3-mediaqueries不起作用，怎么用啊？
!–[if lt IE 9]
script src=””/script
![endif]–
就这样，没问题啊
低版本 IE 支持 CSS3 最佳途径是用 css3-mediaqueries，js 吗
htmlshiv.js
Remy的 HTML5shiv通过JavaScript 来创建HTML5元素(如 main, header, footer等)。在某种程度上通过JavaScript 创建的元素是 styleable(可样式)的。我们可以花很多时间来思考其运行原理，但谁会在乎呢?这种策略在所有产品网站上仍然是必须使用的。
selectivizr.js
Selectivizr.js 是一个不可思议的资源，用于填充不支持的CSS选择器和属性,包括重要的 last-child。在最近的重设计中，我嵌入了 selectivizr，并在更老的 IE 浏览器上也不会错过任何细节。下面是我的实现代码:
现代项目绝对必须的。只在老版本IE时才加载。
另外，Modernizr 脚本中已经添加 HTML5 浏览器支持脚本 html5shiv，我们只要引用 Moernizr.js 文件，IE9 以下的 IE 浏览器就支持 HTML5 添加的语义标签如 nav、section、article 等，也可以使用 CSS 对它们进行样式化。
条件注释
下面这样最土的情况你肯定看到过。但无论丑陋与否，事实上这段代码完全按预期的方式运行：
—
上面的方法是作用于css，来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本，然后在标签上加上该版本的class，这样可以方便hack。
然后我们在css文件中就可以这样写：
.ie6 xxx {};.ie7 xxx {};
如何使用CSS3 Media Queries技术创建wap网站
Media Queries
如果你曾经创建过网站的打印样式，那么你应该知道可以通过设置css2的media type为print去实现打印，下面是两个关于media type的简单应用
//example1
≪link rel=”stylesheet” type=”text/css” media=”screen” href=”sans-serif.css”
≪link rel=”stylesheet” type=”text/css” media=”print” href=”serif.css”
//example2
@media screen { * { font-family: sans-serif } }
而打印功能或者正是你所知道的关于media type的所有用法，由于仅仅是对于打印设备的支持，所以我们很少可以在样式文件中看到media type也就不足为奇了。手持设备的流行和css2 media type的局限性使得人们在css3中定义了Media Queries，它是media type的一种延伸，不过相对于前辈，它的功能强大多了，除了可以为不同的设备选择一种适当的类型之外，它可以检查所有的事情，包括：
浏览器窗口的高度和宽度
设备的高度和宽度
方向，例如iphone手机是横向还是纵向
分辨率
也就是说，如果用户的浏览器支持css3 Media Queries，那么我们就可以专门为某些情况编写相关的css，例如：如果检测到用户使用了像iphone或者ipad这样的设备，那么将可以为它们呈现一个特定的布局。
使用Media Queries为智能手机或者平板电脑增加相应样式
我们可以为智能手机或者平板电脑的布局样式增加相应的css代码，如果你整站都是使用一个样式文件的话，则可以通过在样式文件增加以下语法格式的css代码：
@media only screen and (max-device-width: 480px) {
//在这里填写专门为小屏幕设备设置的样式，例如不同的宽度、高度，不同尺寸的图片等等
}
引用一个单独的Media Queries样式文件
除了修改原有的样式文件来实现对智能手机的支持外，我们还可以将Media Queries样式单独保存为一个独立的文件，然后在页面引用则可。
≪link rel=”stylesheet” type=”text/css”
media=”only screen and (max-device-width: 480px)”
href=”small-device.css” /测试media queries
改造完后，我们需要测试，看一下media queries是否生效。如果你自己拥有一台iphone或者android手机，那么只需要用该设备访问要测试的网站就可以了，但如果没有这些设备的话，那怎么办？我将隆重为你介绍一个非常优秀的模拟media queries测试网站：protofluid，只需要访问该网站，然后设置模拟设备（包括手机、平板、显示器、电视等，而每一种设备都对应有不同的产品可供选择），最后输入要访问的网站链接（包括本地的链接）回车后就可以看到实际效果了。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301929.html
微信扫一扫 
支付宝扫一扫 