介绍 & lt;元内容=翱矶?设备宽度,初始=1.0,最大范围=1.0,user-scalable=0,name=皏iewport"祝辞 & lt; script>
!函数(n) {
var e=n.document,
t=e.documentElement,
我=640,
d=i/100,
o=皁rientationchange"在n ?“orientationchange":“resize"=function () {
var n=t。clientWidth | | 320;
n比;640年,,(n=640),
t.style。字形大?n/d +“px"
};
e。addEventListener,,(n。addEventListener (o, a ! 1), e.addEventListener (“DOMContentLoaded",, ! 1))
}(窗口);
& lt;/script> & lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt;元内容=翱矶?设备宽度,初始=1.0,最大范围=1.0,user-scalable=0,name=皏iewport"比;
& lt; title>无标题文档& lt;/title>
& lt;脚本src=https://www.yisu.com/zixun/巴枷?jquery - 1. - js ">
这篇文章主要介绍html + css如何实现手机端网页自适应,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
一、最近在做项目,写移动端的网页,主要是自适应的问题.bootstrap等前端框架用的不好,又不想耽误时间,不能自适应很烦的人,这里给大家介绍下我的方法,
也是结合了很多人的思路。
1。在头部加入这样的一行代码:
这句话是自动设置缩放,然而,它并不能完全适应所有的手机,并且你在用浏览器手机模式调试的时候可能正常,但是换到真实的手机端其实是不正常的,所以我们还要进行改动。
2。这里推荐大家在用裕度、填充、字体大小等属性的时候用雷替代px,你可能对快速眼动比较陌生,这里我提供好了一段js代码,直接引入即可,不需要纠结快速眼动是怎么回事,关于原理,我再写篇博客做介绍,这篇博客讲怎么使用。就是以下的这段js代码,再写网页的时候放入html中即可。下面代码中640年的指的是手机的屏幕宽度,一般来讲市面上的手机屏幕的宽度最大是640 px,所以这里用我=640指代屏幕的最大宽度,最小是320 px,然后通过引用下面的js你就可以书写自己的网页了,要记得本js的1 rem=100 px哦,其实是为了好换算,比如font_size: 14 px;我们就可以写成,font_size: 0.14雷姆。
3。好了,接下来为大家展示一个轮播图效果来说明一下,先上代码
