Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
There are specific media queries for landscape
and portrait
listed below:
/* iPads (landscape) ----------- */@media only screen
and(min-device-width :768px)and(max-device-width :1024px)and(orientation : landscape){/* Styles */}/* iPads (portrait) ----------- */@media only screen
and(min-device-width :768px)and(max-device-width :1024px)and(orientation : portrait){/* Styles */}
I want to stress, though, that from a "mobile-first" approach, you shouldn't be designing for devices, but rather for resolution breakpoints that fit your design. Try starting with a very small resolution, like 320 x 480. From there, increase the browser width until that design "breaks" (i.e. looks like crap) and then add a breakpoint at that resolution. A handy way of checking the browser width is to open up your developer console in Chrome (or Firebug for Firefox) and typing in document.body.offsetWidth
and hitting enter. That will show the pixel amount of the width of the browser. Keep adding / rearranging things until you get the experience you want on a wide range of devices.
The web is moving forward. This means that we have to think about smartphones all the way up to TVs and projectors. Design your site with that in mind.
I hope this helps.
相关推荐
手机页面强制竖屏显示 横屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑,先上传,以备下次使用...
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑,先上传,以备下次使用...
这是一个Demo, 用纯代码实现iPad的横竖屏的实现,欢迎下载!
主要介绍了使用CSS3来匹配横屏竖屏的简单方法,主要使用到了CSS3中新加入的@media,需要的朋友可以参考下
一:CSS判断横屏竖屏 写在同一个CSS中 XML/HTML Code复制内容到剪贴板 @media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen and (orientation: landscape) { /*横屏 ...
style media=”all and (orientation:portrait)” type=”text/css”>#landscape { display: none; }body {background:red}</style><!–横版本使用的样式–><style media=”all and (ori
H5签名横屏jSignature源代码(完整版,可直接运行),本实例可以直接运行,内容包括jsignature插件,以及css相关的内容,本实例为手机横向屏签名,保存为图片。图片格式可选。如果想看竖屏签名的实例,可以访问本...
在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过HTML,CSS,JS三种判断方法记录下来,方便以后翻阅。 1、通过在html中分别引用横屏和竖屏的样式: <link rel=stylesheet media=all...
判断横竖屏状态有两种方法:css判断、js判断 (一)、css判断横屏还是竖屏 1、写在同一个css文件中 @media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen and (orientation: landscape) { /*...
安卓2.2以下,强制横屏
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。 首先在head中加入如下代码: <meta name=viewport content=width=device-width,initial-scale=1.0, ...
样式 @media screen and (orientation: portrait) { html{ width : 100vmin; height : 100vmax; } body{ width : 100vmin; height : 100vmax; } #gyroContain{ width : 100vmax;... trans
用jquery+html5+css3实现移动端的手动签名,横屏签名,完美回显,可直接复用
CSS-JS横向滚动倒影相册源码
css实现竖向步骤条.zip
要想实现css屏幕大小自适应,.../* 这是匹配横屏的状态,横屏时的css代码 */ @media all and (orientation :landscape){} /* 这是匹配竖屏的状态,竖屏时的css代码 */ @media all and (orientation :portrait){} @me
运用在手机端的页面横屏效果,主要运用css3属性进行设置