css手机自适应效果
Posted tyler-bog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css手机自适应效果相关的知识,希望对你有一定的参考价值。
一,最近在做项目,写移动端的网页,主要是自适应的问题。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>
注:本文出自(https://blog.csdn.net/Fredrik/article/details/81557433)
以上是关于css手机自适应效果的主要内容,如果未能解决你的问题,请参考以下文章
使用CSS3 Media Queries实现网页自适应(转)
外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享