标签：win 处理 自己的 方法 += 需求 功能 form wrapper
最近在做的一个项目是关于h5横屏的。刚开始听到这个需求我是一脸的懵逼，因为从未接触过横屏，也没有看到h5横屏的项目。当时还问了公司另外一位前端小哥，他说他也没做过，不太清楚。。没办法，领导需求就是这样的，只能硬着头皮上了。。
回到自己的工位后，开始各种查资料。。然而关于横屏的确实很少。这里找到一篇关于横屏的。中间有些东西还不错，我拿来借用一下，附上原文链接：h5开发：横屏适配。
强制横屏展示，这里用到了css3的旋转功能，就是对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可。代码如下：
在mounted生命周期中监听resize事件：window.addEventListener(‘resize‘, this.resize)
resize方法如下：
resize () {
var width = window.innerWidth,
height = window.innerHeight,
$wrapper = document.getElementById("app"),
style = "";
if (width >= height) { // 横屏
style += "width:" + width + "px;"; // 注意旋转后的宽高切换
style += "height:" + height + "px;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
}
else { // 竖屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
}
$wrapper.style.cssText = style;
}
好了。到这里已经完成了一小步了。接下来就是适配的问题了。我采用的是vw跟vh。以前没用过，初次接触，用过之后感觉真的挺好用的。
假如ios用户开启了屏幕固定或者android用户开启了屏幕自动旋转。这两种情况下，会有一点不一样。这时候使用css判断横竖屏就显得尤其重要了。代码如下：
/* 竖屏 */
@media screen and (orientation:portrait) {
// 以vw为单位
}
/* 横屏 */
@media screen and (orientation:landscape) {
// 以vh为单位
}
在竖屏的时候使用vw来进行适配。即根据屏幕的宽度来适配。这里以375 x 667的设计稿为例。例如：一个元素宽为526，高为314。根据屏幕的宽度来适配的话就是526/375 * 100% vw、314/375 * 100% vw了。
如果是横屏的话，就是用vh来进行适配。即根据屏幕的高度来适配。同样以375*667的设计稿为例。此时元素宽为526，高为314。就该写成宽为526/375 * 100% vh、高为314/375 * 100% vh了
标签：win 处理 自己的 方法 += 需求 功能 form wrapper
原文地址：https://www.cnblogs.com/jf-67/p/12126105.html
