html5+css3适配问题（手机、平板、PC）

向右看齐 2022-05-15 12:04 308阅读 0赞

原文出处：[http://www.duanliang920.com/learn/web/html5/252.html][http_www.duanliang920.com_learn_web_html5_252.html]

随着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站，和现在相比是不是更加具有优势呢!

可能有些人对“**什么是响应式布局**”还不是很了解，下面就跟大家简单说下什么是响应式布局：

响应式布局：简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。

那么响应式布局的优点和缺点又有哪些呢？

优点：1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。

说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么？

原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

下面我就以我最近做的一个简单的**响应式布局框架**为案列给大家讲讲：

代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 </td> 
 <td> <code>&lt;!DOCTYPE&nbsp;html&gt;</code> <code>&lt;</code><code>html</code><code>&gt;</code> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;<code>charset</code><code>=</code><code>"gb2312"</code><code>&gt;</code> <code>&lt;</code><code>title</code><code>&gt;响应式布局&lt;/</code><code>title</code><code>&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;<code>name</code><code>=</code><code>"keywords"</code>&nbsp;<code>content</code><code>=</code><code>""</code>&nbsp;<code>/&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;<code>name</code><code>=</code><code>"description"</code>&nbsp;<code>content</code><code>=</code><code>""</code>&nbsp;<code>/&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;<code>name</code><code>=</code><code>"viewport"</code>&nbsp;<code>content</code><code>=</code><code>"width=device-width,&nbsp;initial-scale=1.0"</code><code>&gt;</code> <code>&lt;</code><code>style</code><code>&gt;</code> <code>*{margin:0;padding:0;text-decoration:none;list-style:none;</code> <code>&nbsp;</code><code>font-size:14px;font-family:"微软雅黑";text-align:center;</code> <code>&nbsp;</code><code>color:#fff;}</code> <code>&nbsp;</code><code>.clear{clear:both;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#header,#content,#footer{margin:0&nbsp;auto;margin-top:10px;}&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#header,#footer{margin-top:10px;height:100px;}</code> <code>&nbsp;</code><code>#header,#footer,.left,.right,.center{background:#333;}</code> <code>/*通用样式*/</code> <code>&nbsp;</code><code>/*手机*/</code> <code>@media&nbsp;screen&nbsp;and&nbsp;(max-width:600px){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>#header,#content,#footer{width:400px;}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.right,.center{margin-top:10px;}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.left,.right{height:100px;}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.center{height:200px;}</code> <code>}</code> <code>/*平板*/</code> <code>@media&nbsp;screen&nbsp;and&nbsp;(min-width:600px)&nbsp;and&nbsp;(max-width:960px){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#header,#content,#footer{width:600px;}</code> <code>.right{display:none;}</code> <code>.left,.center{height:400px;float:left;}</code> <code>.left{width:160px;margin-right:10px;}</code> <code>.center{width:430px;}</code> <code>}</code> <code>/*PC*/</code> <code>@media&nbsp;screen&nbsp;and&nbsp;(min-width:960px){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#header,#content,#footer{width:960px;}</code> <code>.left,.center,.right{height:400px;float:left;}</code> <code>.left{width:200px;margin-right:10px;}</code> <code>.center{width:540px;margin-right:10px;}</code> <code>.right{width:200px;}&nbsp;</code> <code>}</code> <code>&lt;/</code><code>style</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&lt;!--header&nbsp;start--&gt;</code> <code>&lt;</code><code>div</code>&nbsp;<code>id</code><code>=</code><code>"header"</code><code>&gt;header&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;!--end&nbsp;header--&gt;</code> <code>&lt;!--content&nbsp;start--&gt;</code> <code>&lt;</code><code>div</code>&nbsp;<code>id</code><code>=</code><code>"content"</code><code>&gt;</code> <code>&lt;</code><code>div</code><code>&gt;left&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;</code><code>div</code><code>&gt;center&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;</code><code>div</code><code>&gt;right&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;</code><code>div</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;!--end&nbsp;content--&gt;</code> <code>&lt;!--footer--&gt;</code> <code>&lt;</code><code>div</code>&nbsp;<code>id</code><code>=</code><code>"footer"</code><code>&gt;footer&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;!--end&nbsp;footer--&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

通过上面代码可知：它是通过@media媒介查询判断来执行的CSS样式，也就是说：如果我要做一个响应式布局网站，同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式，通过@media媒介查询来完成响应式布局。

值得注意的是：在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。

禁止代码如下:

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>metaname</code><code>=“viewport”&nbsp;content=“</code><code>width</code><code>=</code><code>device</code><code>-width;&nbsp;</code><code>initial-scale</code><code>=</code><code>1</code><code>.0”&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

加在头部标签里

写在最后：以上纯属个人对响应式布局的理解，随着技术的更新，我们还不学习一些新技术，那么等待我们的就是淘汰。

本文由段亮博客原创出品，如需转载请注明出处

[http_www.duanliang920.com_learn_web_html5_252.html]: http://www.duanliang920.com/learn/web/html5/252.html