CSS3怎么让PC及移动端页面适配

这篇“CSS3怎么让PC及移动端页面适配”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS3怎么让PC及移动端页面适配”文章吧。

　　移动端页面和PC端页面区别在我看来就是屏幕的宽度和高度不同，页面中内容在不同的宽度和高度中所占的比例也是不同的。移动端没有hover事件，移动端也没有touch事件，这就是我现在对于移动端页面和PC页面区别。除了这些以外，所需要用到的CSS、HTML和JavaScript的只是都是差不多的。

　　1.在标签中加入。viewport就是视口，也就是浏览器所显示的屏幕区域，你用chrome浏览器模拟所有的手机用取得的宽度都是980px。也就是当你用手机看页面的时候看到的都是缩放的页面，手机屏幕的宽度来模拟980px将页面进行缩放。如果你专门的适应手机的屏幕做了一个页面，并不想让手机进行缩放，就可以在标签中加入这样就可以不缩放页面进行显示。这个标签的意思就是viewport的宽度就是设备的宽度，不进行缩放，初始的缩放值是1，最大缩放值也是1，最小缩放值也是1。这样你再用所取得的宽度就是设备自生的宽度。所以做移动端的页面加上这个meta标签是必须的。

　　2.使用媒体查询：，这行代码表示只有在满足屏幕宽度位0-375px的时候{}中的css样式才会生效的。，如果是要满足多个条件的时候中间就要使用and连接起来。利用这个就可以做出来响应式页面，当屏幕的宽度不同的时候展现出来的页面也就不同。但是这样你就必须谢多个不同的css文档来满足不同宽度的设备。也可以使用link标签在标签中加上，例如：，这样只有在屏幕宽度在375px才会生效。

　　3.使用媒体查询需要在不同的宽度下写出不同的css样式，这样的线的有点繁琐。还有一种移动端的布局就是使用动态的rem来进行布局，这样可以使得在你的设备的宽度发生变化的时候，页面的样式也会随这设备的宽度变化而发生变化。rem指的就是root font-size根元素的字体大小，也就是html元素的字体的大小。在标签中加上以下代码这样就可以使得rem的大小等于屏幕的宽度。计算出页面中的每部分在这个屏幕宽度中所占的比例，单位使用rem，这样在你屏幕的宽度发生变化的时候页面的内容也会发生相应的变化，而不会在页面宽度发生变化的时候页面中内容的宽度会发生变形。但是不是都必须使用rem来做单位，其他的px等也可以来使用。

以上就是关于“CSS3怎么让PC及移动端页面适配”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。