html5+css3适配问题（⼿机、平板、PC）
html5+css3适配问题（⼿机、平板、PC）2019-07-29 jiangxin
随着互联⽹的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野⾥，⾝为专业的web前端⼈员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，⽐如（⼿机、平板、PC）做⼀个⽹站转眼间就可以变成3个⽹站，和现在相⽐是不是更加具有优势呢!
手机上可以打html与css的app
可能有些⼈对“什么是响应式布局”还不是很了解，下⾯就跟⼤家简单说下什么是响应式布局：
响应式布局：简单点说，就是做⼀个⽹站同时能兼容多个终端，由⼀个⽹站转变成多个⽹站，为我们⼤⼤节省了资源。
那么响应式布局的优点和缺点⼜有哪些呢？
优点：1.⾯对不同分辨率设备灵活性强
2.能够快捷解决多设备显⽰适应问题
缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。
说了这么多，可能还有很多⼈，不明⽩响应式布局该怎么去做，以及它的开发原理是什么？
原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执⾏与之对应的CSS样式。
下⾯我就以我最近做的⼀个简单的响应式布局框架为案列给⼤家讲讲：
代码如下：
通过上⾯代码可知：它是通过@media媒介查询判断来执⾏的CSS样式，也就是说：如果我要做⼀个响应式布局⽹站，同时兼容⼿机、平
板、PC的话就得写三个与之对应的CSS样式，通过@media媒介查询来完成响应式布局。
值得注意的是：在⼿机设备上，我们要禁⽌⽤户来缩放屏幕。不禁⽌的话，可能在显⽰上会造成错位，以及显⽰的不是⼿机⽹站的样式。所以，我们要通过代码来禁⽌⽤户在⼿机端上缩放屏幕，已达到正常的⼿机⽹站效果。
禁⽌代码如下:
1
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
加在头部标签⾥
写在最后：以上纯属个⼈对响应式布局的理解，随着技术的更新，我们还不学习⼀些新技术，那么等待我们的就是淘汰。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。