gpt4 book ai didi

html - 如何适配屏幕

转载 作者:太空宇宙 更新时间:2023-11-04 13:25:26 24 4
gpt4 key购买 nike

这是我的代码:-

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="responsiveslides.min.js"></script>

<style>

<!-- #one
{
height: 80%;
width: 50%;
} -->
p { margin: 0 !important; }
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}

#header {
position: fixed;
top: 0;
width: 100%;
}

#footer {
position: fixed;
bottom: 0;
width: 100%;
}

#content {
width: 100%;
background-color:#666;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).resize(function(){
var height = $(this).height() - $("#header").height() + $("#footer").height()
alert(height);
$('#content').height(height);
})

$(window).resize(); //on page load
});//]]>

</script>
</head>

<body>

<div data-role="page" id="article1" data-pagination="1">
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>

<div id="content">
<div class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>

</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"><a href="" style="text-align:center;background-color: #666;"></h3>good day</h3></a></li>

</ul>

</div>
</div>
</body>
</html>

我的代码有效。它只显示三个 div(如页眉、页脚和内容),但是当在我的浏览器上运行此代码时,滚动添加了。我希望此代码适合任何浏览器和/或任何移动设备。所以请给我一个关于如何适应任何屏幕的想法。

提前致谢。

最佳答案

这是因为 data-role="content" 不会覆盖可用空间,除非您强制它这样做,如下所示:

.ui-content {
padding: 0;
position: absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}

阅读更多相关信息 here .

关于html - 如何适配屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23759674/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com