php代码适配⼿机端,html和css结合实现⼿机端⽹页⾃适应的
代码
本篇⽂章给⼤家带来的内容是关于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。《script》
!function(n) {
var e = n.document,
t = e.documentElement,
i = 640,
d = i / 100,
html和css书籍推荐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.好了，接下来为⼤家展⽰⼀个轮播图效果来说明⼀下，先上代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。