移动端H5页面强制横屏显示

原创已于 2023-09-12 17:39:03 修改 · 1.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #css #css3

于 2023-09-12 17:37:18 首次发布

文章详细描述了一个使用HTML和CSS创建的登录表单，配合媒体查询实现横竖屏下的自适应布局，重点讲解了`transform-origin`属性在`rotate`函数中的作用。

HTML结构：

<div class="container">
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">账号</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入账号">
    </div>
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">密码</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入密码">
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">备注</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入备注"></textarea>
    </div>
</div>

CSS：

.container {
    position: absolute;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 竖屏 */
@media screen and (orientation: portrait) {
    .container {
        width: 100vh;
        height: 100vw;
        top: calc((100vh - 100vw) / 2);
        left: calc((100vw - 100vh) / 2);
        transform: rotate(90deg);
        /* transform-origin: 50% 50%; */
        /* transform-origin: center center; */
        /* transform-origin: center; */
    }
}

/* 横屏 */
@media screen and (orientation: landscape) {
    .container {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        transform: none;
        /* transform-origin: 50% 50%; */
        /* transform-origin: center center; */
        /* transform-origin: center; */
    }
}

transform-origin：更改一个元素变形的原点

rotate()函数的转换原点是旋转中心

默认的转换原点是 center，所以如果是以center为旋转中心，可以不写transform-origin属性，或者写transform-origin: 50% 50%;、transform-origin: center center;、transform-origin: center;都可以。

在这里插入图片描述