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日

      悬赏问题

      • ¥25 接口/特征方法的异常错误返回如何判断是否需要设计
      • ¥40 代码+预测分析,文件私信发哦(价格可商量)
      • ¥15 GAMES101 HW1 无法定义
      • ¥15 pycharm不管允许什么代码都出错,都会出现下面的情况。
      • ¥15 boost::integrate的用法
      • ¥20 51单片机输出pwm时无法调节频率,如何解决?
      • ¥15 DSP28335 AD采集正弦波
      • ¥50 pwwinauto调式修改
      • ¥30 关于#单片机#的问题:单片机基于51单片机开发计时器,使其实现以下功能:(1)开发板上四个独立按键分别控制计时器的启停、计时器的复位(按下计时值归零)、计时位切换、计时时间的递增
      • ¥15 看个代码。做个详细的解说