使用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
犀牛前端部落 相关推荐
-
IE6 border出现黑色背景解决办法
在ie6中我们使用border写的三角形会出现黑色的背景，解决办法就是将对应的border-style设置为solid，其他的设置成dashed例：border-color: tr…
-
css实现禁止内容被复制
自己网站辛辛苦苦的原创内容，不想被人复制，可以使用CSS来实现。 本文目的：了解如何使用CSS属性user-select禁用文本选择。 默认情况下，浏览器允许我们使用键盘在浏览器中…
-
常见的浏览器内核整理
今天俺跟大家分享一下浏览器内核知识，开发中使用的常见的就是将写CSS的时候加上浏览器内核前缀。 定义 内核主要分为渲染引擎和 JS 引擎。前者负责页面的渲染，后者负责执行解析 Ja…
-
CSS鼠标变成小手效果
有的时候我们需要用CSS来设置CSS悬浮的时候显示小手效果，来告诉用户当前元素可点击。 其实这是使用到了CSS的 cursor属性，实现代码如下： 其他效果 cursor属性除了可…
-
为input设置placeholder颜色
今天俺跟大家分享一个小技巧，那就是这只input的placeholder颜色，因为要考虑到不同浏览器，所以需要添加不通的浏览器前缀，另外在ie10之前的版本是没有办法设置place…
-
CSS3常见技巧（一）：如何禁止文本选择高亮
根据 Can I use显示，目前user-select已经支持绝大多数浏览器了，不过如果想在IE9或者更早之前使用，还需要使用浏览器前缀。 代码如下 . noselect{ -w…
-
解决IE11滚动条丢失样式问题
今天俺跟大家分享一个工作中遇到的一个小问题，那就是IE11滚动条右边的样式丢失问题，俺一开始是使用的nicescroll这个插件，该插件在IE的兼容上不是很好，应该是使用了什么IE…
-
移动端::-webkit-scroll设置滚动条样式
该滚动条样式一般适用于移动端，PC端一般考虑兼容性会用到类似nicescroll插件。 实现代码如下： /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webki…
-
CSS translate3d()函数
CSS translate3d()函数用于在三维空间中移动元素。 translate3d()函数的工作原理如下: 它沿着x轴、y轴和z轴按提供的数量移动元素的位置。 沿x轴移动(水…
-
transform-origin原生CSS实现上下摇摆类似放风筝效果
今天俺跟大家分享一个之前工作中遇到的一个小技巧，灵感来自于营销提出的需求。 对于transform-origin这个属性，工作中我们可以说基本上是不怎么需要使用的，但是该属性对于实…
