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

如何使用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条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 12月3日
      • 已采纳回答 11月25日
      • 创建了问题 11月19日

      悬赏问题

      • ¥15 刚入职被要求写这种文档,应该如何下手
      • ¥15 最优经济尺寸设计问题
      • ¥15 从多元正态分布中生成3维样本
      • ¥15 GEO下载数据的处理报错 :函数‘Meta’标签‘"data.frame"’找不到继承方法,如何解决?
      • ¥15 android object box 一个实体多个表怎么写
      • ¥15 temux 启用docker 服务失败
      • ¥15 Flask 使用celery发送邮件出现‘目标计算机积极拒绝‘
      • ¥60 老人用的sd卡在手机里面不知道操作了什么,导致图片和视频变成了文件,取下sd卡连接电脑就是图中的样子,后缀改为.jpg才可以,需要用系统的画图软件才能打开,文件属性还是文件,有没有批量操作的解决办法
      • ¥15 超时跳出方法代码的返回值问题
      • ¥15 汇编语言程序设计设计,ascii码求数,再求数的BCD码