移动端开发和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等也可以来使用。
