使用CSS检测设备方向的代码如下:
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
参考文档： http://www.w3.org/TR/css3-mediaqueries/#orientation
原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/796.html
犀牛前端部落 相关推荐
-
常见的浏览器内核整理
今天俺跟大家分享一下浏览器内核知识，开发中使用的常见的就是将写CSS的时候加上浏览器内核前缀。 定义 内核主要分为渲染引擎和 JS 引擎。前者负责页面的渲染，后者负责执行解析 Ja…
-
解决IOS长按img无法保存问题
最近俺遇到一个遇到一个问题，还是大佬帮忙解决的，就是IOS长按图片无法保存，img默认是可以在IOS手机上长按保存的。 为什么默认行为无法调用 这是因为在reset.less文件中…
-
IE6 border出现黑色背景解决办法
在ie6中我们使用border写的三角形会出现黑色的背景，解决办法就是将对应的border-style设置为solid，其他的设置成dashed例：border-color: tr…
-
flexbox居中对齐
Flexbox弹性布局是俺非常喜欢的页面元素居中对齐方式。 我们可以申明一个容器元素，并设置容器元素display:flex; justify-content:center，这样容…
-
link和@import引入CSS区别
link和@import引入CSS主要有以下区别： link是HTML标签，@import是css提供的。 link引入的样式页面加载时同时加载，@import引入的样式需等页面加…
-
flex-basis和width之间有什么不同？
flex-direction 首先我们需要知道的是，flex-basis属性并不是总是为width。 当flex-direction为row时，flex-basis控制的是widt…
-
CSS3教程text-shadow+animation实现文字抖动效果
text-shadow是CSS3的一个属性，可以为字体添加阴影效果，减少了图片的使用 基础说明 text-shadow: X轴 Y轴 blur color; 四个参数分别为X轴、Y…
-
css图片居中多种方法总结
图片居中显示是HTML布局页面常见需求。 在本文中，俺将和大家探讨将图片居中的多种实现方法。 下面准备好，俺们即将发车~ 请参阅下面的在线演示和源代码。 您也可以打开web开发者工…
-
移动端::-webkit-scroll设置滚动条样式
该滚动条样式一般适用于移动端，PC端一般考虑兼容性会用到类似nicescroll插件。 实现代码如下： /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webki…
