击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

开发一个H5页面的时候，如果这个页面只适配竖屏/横屏，这种情况下，通常要做一个手机横竖屏的提示，实现这个提示功能的方法有多种，这里，我准备写几行样式来实现。

先看如何实现及效果，在总结一下用样式实现的几个好处。

一、这么实现

代码：

效果图：

当横屏展示的时候：

实现起来特别简单，就是html和body元素上设置了after/before伪元素，使用media的方式在符合条件的情况下，将其展示出来。详细见上面代码所示。

二、有哪些好处

纯CSS实现有哪些好处了

1、使用起来比较方便，引用这段CSS代码，所有页面就可以实现提示功能。

2、无http请求，不需要引入JS代码文件，也不会阻塞页面的渲染，图片转成base64，代码量也不多。

3、视觉可以自定义，提示图可以灵活更换。

移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。

CSS如何判断横屏竖屏

竖屏引用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

横屏引用

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

css代码

@media screen and (orientation: portrait) { 
 /*竖屏 css*/ 
} 
@media screen and (orientation: landscape) { 
 /*横屏 css*/ 
} 

JS判断横屏竖屏方法

在做前端响应式网站特别，响应式成为现在前端设计一个热点，它成为热点的最主要的原因就是，移动端设备屏幕的种类多样，那么如何设置响应式屏幕。

/* 打印样式 */

@media print { color: red; }

/* 手机等小屏幕手持设备 */

@media screen and (min-width: 320px) and (max-width: 480px) { body { background: yellow; } }

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) { body { background: blue; } }

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) { body { background: green; } }

/* 竖屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */

@media screen and (orientation:landscape){对应样式}

手机、平板设备屏幕尺寸众多，宽度不一，写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活，如果你css不熟练的话最好先别折腾这块，把基础练好了来。 还有，用了css媒体查询后，ie6-8载入不了样式表，要引用个：Respond.js来让ie6-8下正确载入css。js自行百度，到处有下载。 用CSS判断横屏竖屏问题。

CSS代码如下

1、

@media (orientation: portrait) { } 横屏

@media (orientation: landscape) { }竖屏

2、 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏

用JavaScript判断横屏竖屏问题。JavaScript代码如下

//判断手机横竖屏状态：

function hengshuping(){ if(window.orientation==180||window.orientation==0){

alert("竖屏状态！") }

if(window.orientation==90||window.orientation==-90)

{ alert("横屏状态！") }

}

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。

/* media */

/* 横屏 */

@media screen and (orientation:landscape){

}

/* 竖屏 */

@media screen and (orientation:portrait){

}

/* 窗口宽度<960,设计宽度=768 */

@media screen and (max-width:959px){ }

/* 窗口宽度<768,设计宽度=640 */

@media screen and (max-width:767px){ }

/* 窗口宽度<640,设计宽度=480 */

@media screen and (max-width:639px){ }

/* 窗口宽度<480,设计宽度=320 */

@media screen and (max-width:479px){ }

/* windows UI 贴靠 */

@media screen and (-ms-view-state:snapped){ }

/* 打印 */

@media print{ }

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com