Pure.崽崽
2021-11-19 21:42
采纳率: 62.5%
浏览 26
已结题

如何使用HTML+CSS+JS+JQuery写出移动端页面

问题遇到的现象和发生背景

我们要设计一个问卷在手机上面显示(自适应)或者说如何写代码使其在移动端展示
(核心技术或者推荐啥优质视频越简单越好急用)
简单来说有没有解决自适应的方法需要学习的技术或者推荐的视频和链接求指路
入门没多久,但是急!

问题相关代码,请勿粘贴截图

以下为body内代码(一共四张图)

<body>
<div id="background">
            <div id="return">
                <img src="img/details_btn_return.png" style="width: 30px;height: 40px;
                filter: invert(100%);" />
            </div>
            
            <div id="tlogo">
                <img src="img/homepage_logo.png" width="518px"/>
            </div>
            
            <div id="tbanner">
                <img src="img/homepage_banner.png" width="700px"/>
            </div>
            
            <div id="tbanji">
                <img src="img/homepage_btn_banji.png" width="490px"/>
            </div>
            
        </div>
</body>

<script src="js/jquery-3.6.0.min.js"></script>
    <script>
        //页面一进来获取屏幕尺寸
        $(document).ready(function(){
            $("body").css({"width":$(document).width()+"px","height":$(document).height()+"px"})
        })
        
    </script>

以下为css代码

#background{
    background-color: #4a81e3;
    width: 1080px;
    height: 1856px;
    border: 0px;

}
#bo{
    align-content: center;
}

#return{
    position: relative;
    top:56px;
    left: 79px;

}

#tlogo{
    width: 518px;
    height: 100px;
    margin:0 auto;
    position: absolute;
    top:200px;
    left: 281px;
    
}

#tbanner{
    width: 736px;
    height: 606px;
    margin: 0 auto;
    margin-top: 150px;
    position: relative;
    top:272px;

}

#tbanji{
    width: 490px;
    height: 85px;
    margin:0 auto;
    position: relative;
    top :578px;
}
我的解答思路和尝试过的方法

不是很会jQuery写的无用感觉没写完整

我想要达到的结果

集思广益!或者谁能帮我完整一下,谢谢

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 乔碧萝·乔斯达 2021-11-19 22:58
    已采纳

    把px改成vw就好了

    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

相关推荐 更多相似问题