html旋转及自适应

旧城等待， 2023-10-03 19:14 16阅读 0赞

<div id="main">html页面</div>

一、使用css达到旋转目的

#main {
        -webkit-transform: rotate(90deg); /* Safari and Chrome */
        -moz-transform: rotate(90deg);   /* Firefox */
        -ms-transform: rotate(90deg);   /* IE 9 */
        -o-transform: rotate(90deg);   /* Opera */
        transform: rotate(90deg);
    }

二、自适应（js）

$("#main").css({
                "width": document.body.clientHeight,
                "height": document.body.clientWidth,
                "position": "absolute",
                "top": ((document.body.clientHeight - document.body.clientWidth) / 2),
                "left": -((document.body.clientHeight - document.body.clientWidth) / 2)
            });

> 网页可见区域高：document.body.clientHeight
> 
> 网页正文全文高：document.body.scrollHeight  
> 网页可见区域高（包括边线的高）：document.body.offsetHeight  
> 网页被卷去的高：document.body.scrollTop
> 
> 屏幕分辨率高：window.screen.height
> 
> 详情可见：[搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop][clientHeight_offsetHeight_scrollHeight_offsetTop_scrollTop]

[clientHeight_offsetHeight_scrollHeight_offsetTop_scrollTop]: https://blog.csdn.net/qq_35430000/article/details/80277587

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 html旋转及自适应

<div id="main">html页面</div> 一、使用css达到旋转目的 main { -webkit-transform: ro

旧城等待，/ 2023年10月03日 19:14/ 0 赞/ 17 阅读

相关 html 中图片自适应大小设置

一、图片自适应大小图片设置固定大小（当然width和height至少大于200px的情况下）个人觉得就很影响响应式布局了，可能会使移动端局部发生错乱，所以图片在一个div中

妖狐艹你老母/ 2023年07月15日 09:52/ 0 赞/ 53 阅读

相关 HTML背景图片自适应全屏幕

margin: 0px; background-image: url(/resource/error-bg.png); background-rep

拼搏现实的明天。/ 2023年06月27日 03:52/ 0 赞/ 86 阅读

相关 HTML 高度自适应布局

定义：高度自适应表示，在浏览器窗口边界变化，或在浏览器显示比例调整，这一过程中，浏览器中元素随着上述变化而自适应改变 height 属性值的特性。原理：当一个元素是

偏执的太偏执、/ 2022年09月26日 00:21/ 0 赞/ 266 阅读

相关自适应滤波器及LMS自适应算法的理解

> > 分享一篇以前写现代信号处理的课程论文。 > > > > ———————————————————— ![SouthEast][] [SouthEast]

青旅半醒/ 2022年09月18日 02:00/ 0 赞/ 249 阅读

相关 html5写自适应头部

仿写的一个聚划算的例子 ![Center][] <!DOCTYPE html> <html lang="en"> <head> <m

比眉伴天荒/ 2022年08月07日 08:42/ 0 赞/ 235 阅读

相关 HTML-视频高度自适应解决方法

使用开源video.js 项目地址：[https://github.com/videojs/video.js][https_github.com_videojs_video

墨蓝/ 2022年05月17日 12:25/ 0 赞/ 943 阅读

相关 html textarea文本域高度自适应

1、可直接在 [菜鸟教程网站测试页面中测试][Link 1] <!DOCTYPE html> <html> <head> <meta cha

怼烎@/ 2022年03月17日 13:10/ 0 赞/ 375 阅读

相关 html表格自适应

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>tabl

偏执的太偏执、/ 2021年12月21日 16:13/ 0 赞/ 338 阅读

相关 html背景图片自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

Dear 丶/ 2021年10月18日 09:22/ 0 赞/ 456 阅读