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

Posted 程序员的生活1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html和css结合实现手机端网页自适应的代码相关的知识,希望对你有一定的参考价值。

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

web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线)

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

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

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

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

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

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。

<script>
!function(n) 
 var e = n.document,
 t = e.documentElement,
 i = 640,
 d = i / 100,
 o = "orientationchange" in n ? "orientationchange": "resize",
 a = function() 
 var n = t.clientWidth || 320;
 n > 640 && (n = 640),
 t.style.fontSize = n / d + "px"
 ;
 e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
 (window);
</script>

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 */
bodymargin:0 auto !important;max-width:640px;min-width:320px;background: #fff !important;overflow-x: hidden;
#bannerposition: relative;
#banner .hdposition: absolute;width: 100%;text-align: center;bottom: 2%;left: 0;
#banner .hd liwidth: 0.2rem;height: 0.2rem;border:1px solid #fff;border-radius: 50%;display: inline-block;margin:0 4px;
#banner .hd li.onbackground: #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> 

以上是关于html和css结合实现手机端网页自适应的代码的主要内容,如果未能解决你的问题,请参考以下文章

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

使用CSS3 Media Queries实现网页自适应(转)

如何添加CSS让页面自适应手机屏幕

css手机自适应效果

使用CSS3 Media Queries实现网页自适应

使用bootstrap 如何做自适应的网页,比如一个大图如何适应手机端和pc端