iPad创建简单的演示目标CSS的页面

2016-02-20 00:31 62 1 收藏

今天图老师小编给大家展示的是iPad创建简单的演示目标CSS的页面，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！

【 tulaoshi.com - Web开发】

译自：

iPad终于发布了，那么如果用样式区分iPad和iPhone中的safari浏览器，Jason Grigsby做了一个有用的实验。

就绝大部分而言，iPad上的移动版safari和iPhone上的事一样的。我发现的一个不同是，iPad上的webkit支持基于方向(orientation)的CSS媒体查询(media query)声明。

我为iPad创建了。

在CSS中使用orientation 非常简单，代码就行这样：

link rel=stylesheet media=all and (orientation:portrait) href=portrait.csslink rel=stylesheet media=all and (orientation:landscape) href=landscape.css

在这个例子中，两个CSS文件中的唯一不同就是隐藏其中的一个标题。该演示页面的HTML部分如下：

h1 id=portraitYou’re Viewing in Portrait Mode/h1h1 id=landscapeYou’re Viewing in Landscape/h1

中的CSS只是简单的隐藏landscape部分的h1:

#landscape {display:none}

当然，的作用与之相反。

你可以在最新版本的Safari/Chrome和Firefox中看到这个CSS查询。简单的改变你的浏览器的窗口大小，让其高度大于宽度，你就能看到效果了。

来源:http://www.tulaoshi.com/n/20160220/1632007.html

看过《iPad创建简单的演示目标CSS的页面》的人还看了以下文章更多>>

如何查找页面中的CSS bug

标签： Web开发

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问...

简单的页面缓冲技术（一）

标签： PHP

· limodou·转载PHP中文用户前言其实说它为技术，也许不能说是真正的技术。这只不过是我自已想出来的页面处理的方法，当然与别人的想法可能是一致的。不过我还是想给它一个好听的名字。那么我这里所指的页面缓冲是什么呢？就是指将动态生成的页面保存...

简单的页面缓冲技术（二）

标签： PHP

· limodou·转载PHP中文用户我的具体实现的例子为了帮助大家有个感性认识，这里我给出在我的主页上实现的基于文件处理的方法。只有主要的处理代码，不完整。 <? 1 $tmpfile="../tmp/".basename($REQUEST_URI); &...

网页页面中真实的宇宙效果演示

标签： Web开发

htmlheadtitle网页特效页面特效网页页面中真实的宇宙效果演示/titlemeta name="Author" content="http://homepage.yesky.com"meta http-equiv="imagetoolbar" content="no"style type="text/css" body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; back...

简单的页面缓冲技术（三）

标签： PHP

简单的页面缓冲技术（三） limodou·转载PHP中文用户 content.php3文件用来处理动态页面。用户可以通过content.php3?page=id号来读出一个数据文件。具体方法我就不说了，大家只要知道每个数据文件都有一个不同的id号，这样content.php3?page=id号的方式...

查看更多精彩>>