html和css联合实现手机端网页自顺应的代码
发布时间：09/01 来源：未知 浏览：
关键词：
一，比来在做项目，写移动端的网页，主如果自顺应的问题。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 */
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>相关引荐：
字体加暗影结果如何用css属性实现？（代码演示）
css如何实现鼠标移动到div块时主动加暗影结果？
HTML和CSS3中的2D、3D结合实现动画结果以上就是html和css结合实现手机端网页自顺应的代码的具体内容，更多请关注百分百源码网其它相关文章！
