html和css结合实现手机端网页自适应的代码

快来打我* 2023-02-17 06:17 8阅读 0赞

本篇文章给大家带来的内容是关于html和css结合实现手机端网页自适应的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

**[web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）][web]**

一，最近在做项目，写移动端的网页，主要是自适应的问题。bootstrap等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法，

也是结合了很多人的思路。

1.在头部加入这样的一行代码：

这句话是自动设置缩放，然而，它并不能完全适应所有的手机，并且你在用浏览器手机模式调试的时候可能正常，但是换到真实的手机端其实是不正常的。所以我们还要进行改动。

2.这里推荐大家在用magin,padding,font-size,等属性的时候用rem替代px，你可能对rem比较陌生，这里我提供好了一段js代码，直接引入即可，不需要纠结rem是怎么回事，关于原理，我再写篇博客做介绍，这篇博客讲怎么使用。就是以下的这段js代码，再写网页的时候放入html中即可。下面代码中的640指的是手机的屏幕宽度，一般来讲市面上的手机屏幕的宽度最大是640px，所以这里用i=640指代屏幕的最大宽度，最小是320px，然后通过引用下面的js你就可以书写自己的网页了，要记得本js的1rem=100px哦，其实是为了好换算，比如font\_size:14px;我们就可以写成，font\_size:0.14rem。

3.好了，接下来为大家展示一个轮播图效果来说明一下，先上代码

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>无标题文档</title>
    <script src="images/jquery-1.js"></script>
    <script src="images/TouchSlide.js"></script>
    <script src="images/rem.js"></script>
    <style>
     /* banner 轮播切换 star */
    body{margin:0 auto !important;max-width:640px;min-width:320px;background: #fff !important;overflow-x: hidden;}
    #banner{position: relative;}
    #banner .hd{position: absolute;width: 100%;text-align: center;bottom: 2%;left: 0;}
    #banner .hd li{width: 0.2rem;height: 0.2rem;border:1px solid #fff;border-radius: 50%;display: inline-block;margin:0 4px;}
    #banner .hd li.on{background: #9e5fd4;border-color:#9e5fd4; }
      
     </style>
     <script type="text/javascript">
     $(function(){
     /*根据banner个数增加下方指示点*/
     n=$(".ibanner .bd li").size();
     for (m=0;m<n;m++){
     $('.ibanner .hd').append('<li></li>');
     }
     /*banner切换*/    
     if($('.ibanner').length){
     TouchSlide({slideCell: "#banner",mainCell: ".bd",autoPlay: true,effect: "leftLoop",interTime:5000});
     }
      
    });
     </script>
    </head>
    <body>
     
     <p id="banner" class="ibanner">
     <p class="tempWrap" style="overflow:hidden; position:relative;">
      
     <ul class="bd" style="width: 3840px; position: relative; 
    overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms;
     transform: translateX(-2560px);">
     
      
     <li style="display: table-cell; vertical-align: top; width: 
    640px;"><a
    href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img
     src="images/banner11.jpg"></a></li>
     <li
    style="display: table-cell; vertical-align: top; width: 640px;"><a
      
    href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img
     src="images/banner12.jpg"></a></li>
     <li
    style="display: table-cell; vertical-align: top; width: 640px;"><a
      
    href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img
     src="images/banner13.jpg"></a></li>
     <li
    style="display: table-cell; vertical-align: top; width: 640px;"><a
      
    href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img
     src="images/banner14.jpg"></a></li>
     <li
    style="display: table-cell; vertical-align: top; width: 640px;"><a
      
    href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img
     src="images/banner15.jpg"></a></li>
     </ul>
     </p>
     <ul class="hd">
     </ul>
     </p>
     
    </body>
    </html>

[web]: https://blog.csdn.net/lin123_00/article/details/105777795