html+css手机端自适应网页

一，最近在做项目，写移动端的网页，主要是自适应的问题。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.好了，接下来为大家展示一个轮播图效果来说明一下，先上代码

    

    
 

   

     

       
       
• 

       
• 

       
• 

       
• 

        
• 

     

   

   

   

 

   

效果图如下所示

4.由于以上代码设计到了三个js，就是我前边提到的rem,自适应等，所以，我把这个效果分享一个百度网盘吧，其实前边的步骤有介绍的，按要求来就行，但是顾及一下新手吧，我发个报读网盘链接链接：https://pan.baidu.com/s/1hCdjn6uvRjWOgUBTpfmqTg 密码：be8a