- 博客(14)
- 收藏
- 关注
原创 前台必须写
http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">>
2013-05-10 07:34:06 377
原创 CSS详解(3)— —媒体类型
你还记得你所打印的第一个网页吗?你所打印出的网页也许使你很失望。你也许要问:为什么看起来很好的页面,打印出来却不怎么样。实际上,通过使用CSS2,并在你使用媒体类型的基础上,你能够选择不同样式的打印效果。那也就是说:你可以使你的页面在屏幕上以一种样式显示,而当打印时,显示不同的样式。所有这些,你只要使用@media。@media screen{BODY{background:black
2013-04-09 14:23:19 417
原创 所设置的wap移动网站不显示,为什么?
1.当screen 的宽度小于 1024 px 的时候,所有的img标签的宽度和高度定位为:128px@media screen and (max-width: 1024px) { img { width: 128px; height: 128px; } } 动态的改变窗口的大小会出发这个事件,会显示你你在各种情况下所设置的
2013-04-09 09:38:53 480
翻译 如何测试移动Wap网站效果?
测试媒体查询测试代码很重要。针对平板电脑和智能电话进行测试使测试变得更复杂,因为理想情况下您将有大量设备需要处理。幸运的是,无需拥有实际的设备,即可测量大多数查询。拥有真实的设备总是会更好,但出于本文的用途,使用简单的浏览器将有助于您理解查询的工作原理。本文所附带的ZIP文件包含一个范例文件(mediaqueries.html),该文件附加了3种不同的设计。使用范例文件执行以下调节测试。将
2013-04-07 15:19:53 633
原创 CSS详解— —媒体查询(2)
如何编写媒体查询要将媒体查询添加到media属性中,您可以使用表1中的媒体功能设置一个或多个条件。与CSS属性一样,在一个冒号后指定媒体功能的值。每个条件包含在圆括号中,使用关键字and添加到媒体声明中。例如:media="screen and (min-width: 401px) and (max-width: 600px)" 媒体查询是布尔值:它们要么为true,要么为false。
2013-04-07 15:16:05 716
翻译 width、device-width和viewport
媒体查询的一个最容易混淆的方面或许就是width和height与添加了前缀device-的类似值之间的区别。对于桌面和平板计算机,它们之间的区别很容易理解:width和height指浏览器视区的尺寸,而device-width和device-height指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器,所以width和height是您需要使用的度量方法。移动浏览器将填满可用的屏幕,所以您可
2013-04-07 15:10:33 1702
翻译 wap网站实例
一、范例文件:mediaqueries.zip注意:这是Donald Booth最初编写的一篇文章的更新和扩展版。移动设备的快速普及完全颠覆了Web设计领域。用户不再仅在传统桌面系统上查看Web内容,他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错,在小型的电话以及介于它们之间的各种设备上看起来也不错。媒
2013-04-07 15:04:35 658
原创 学习网址
1、http://beforweb.com/ :Be For Web |为网而生(1)http://beforweb.com/node/21(2)http://beforweb.com/node/21/page/0/22、http://www.infoq.com/cn/news/2011/12/introducing-media-queries#header_0 :案例 (2
2013-04-07 14:41:15 378
原创 CSS详解(二)— —媒体查询(1)
在HTML4中,媒体样式表的写法是:在CSS3中,媒体查询(Media Queries)扩展了媒体类型功能,支持更为精准的样式表标签。媒体查询由媒体类型和若干表达式组成,表达式负责检查特定媒体特性的条件。通过使用媒体查询,我们不需要修改网页内容,就可以使文档显示适应特定的输出设备。媒体查询是一个逻辑表达式,其结果为真(true)或假(false)。如果媒体查询的媒体类型与用户客户端所在
2013-04-07 14:38:06 931
原创 CSS详解(一)— —媒体类型
你还记得你所打印的第一个网页吗?你所打印出的网页也许使你很失望。你也许要问:为什么看起来很好的页面,打印出来却不怎么样。实际上,通过使用CSS2,并在你使用媒体类型的基础上,你能够选择不同样式的打印效果。那也就是说:你可以使你的页面在屏幕上以一种样式显示,而当打印时,显示不同的样式。所有这些,你只要使用@media。@media screen{BODY{background:black
2013-04-07 14:16:35 590
转载 CSS
进行到这里时,就开始变得有趣了。你可以再次依靠服务端功能检测,但这次是在单一网站的基础上进行优化,而不是重定向到另一个独立网站。有一些手机所支持功能的数据库可以参考,例如WURFL。它是以XML文件的形式开放的,你可以在设计优化内容之前,先通过它来查询设备所支持的功能。你还可以查询移动设备的UA字符串,找出这些设备的其他细节参数,例如是否有摄像头,屏幕尺寸是多少,以及它的语言种类等信息。 在
2013-04-07 10:22:16 393
转载 Meta
一、网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。其中: width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scal
2013-03-25 16:55:32 473
翻译 响应式设计(一)
在设计中经常遇到这几个问题:1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本。2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本。3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好?有没有办法能有效解决这些问题呢?响应式Web设计(Responsive Web design)的理念是
2013-03-25 10:13:41 690
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人