移动端的适配

移动端开发和PC端页面的区别是什么

• 移动端页面和PC端页面区别在我看来就是屏幕的宽度和高度不一样，页面中内容在不一样的宽度和高度中所占的比例也是不一样的。移动端没有hover事件，移动端也没有touch事件，这就是我如今对于移动端页面和PC页面区别。除了这些之外，所须要用到的CSS、HTML和JavaScript的只是都是差很少的。

怎样作适配移动端的页面呢

1.在head标签中加入<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">。viewport就是视口，也就是浏览器所显示的屏幕区域,你用chrome浏览器模拟全部的手机用document.documentElement.clientWidth取得的宽度都是980px。也就是当你用手机看页面的时候看到的都是缩放的页面，手机屏幕的宽度来模拟980px将页面进行缩放。若是你专门的适应手机的屏幕作了一个页面，并不想让手机进行缩放，就能够在head标签中加入<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">这样就能够不缩放页面进行显示。这个标签的意思就是viewport的宽度就是设备的宽度，不进行缩放，初始的缩放值是1，最大缩放值也是1，最小缩放值也是1。这样你再用doucment.documentElement.clientWidth所取得的宽度就是设备自生的宽度。因此作移动端的页面加上这个meta标签是必须的。

2.使用媒体查询：@media(max-width=375px){css},这行代码表示只有在知足屏幕宽度位0-375px的时候{}中的css样式才会生效的。@meida(min-width=200px)and(max-width=400px){},若是是要知足多个条件的时候中间就要使用and链接起来。利用这个就能够作出来响应式页面，当屏幕的宽度不一样的时候展示出来的页面也就不一样。可是这样你就必须谢多个不一样的css文档来知足不一样宽度的设备。也可使用link标签在标签中加上media，例如：<link rel="stylesheet" href="style.css" media="(max-width=375px)">,这样只有在屏幕宽度在375px才会生效。

3.使用媒体查询@media须要在不一样的宽度下写出不一样的css样式，这样的线的有点繁琐。还有一种移动端的布局就是使用动态的rem来进行布局，这样可使得在你的设备的宽度发生变化的时候，页面的样式也会随这设备的宽度变化而发生变化。rem指的就是root font-size根元素的字体大小，也就是html元素的字体的大小。在head标签中加上如下代码<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><script>var page=window.innerWidth;document.write('<style>html{font-size:'+ pageWidth + 'px;}</style>')</script>这样就可使得rem的大小等于屏幕的宽度。计算出页面中的每部分在这个屏幕宽度中所占的比例，单位使用rem，这样在你屏幕的宽度发生变化的时候页面的内容也会发生相应的变化，而不会在页面宽度发生变化的时候页面中内容的宽度会发生变形。可是不是都必须使用rem来作单位，其余的px等也能够来使用。