PC、手机适配html

时间  2019-12-06 标签 pc 手机 适配 html
随着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出如今咱们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为何这样说呢？由于响应式布局能同时兼容多个终端，好比（手机、平板、PC）作一个网站转眼间就能够变成3个网站，和如今相比是否是更加具备优点呢!
可能有些人对“什么是响应式布局”还不是很了解，下面就跟你们简单说下什么是响应式布局：
响应式布局：简单点说，就是作一个网站同时能兼容多个终端，由一个网站转变成多个网站，为咱们大大节省了资源。
那么响应式布局的优势和缺点又有哪些呢？
优势：1.面对不一样分辨率设备灵活性强
         2.可以快捷解决多设备显示适应问题
缺点：不能彻底兼容全部浏览器，代码累赘，加载时间加长。
说了这么多，可能还有不少人，不明白响应式布局该怎么去作，以及它的开发原理是什么？
原理：简单点说响应式布局它是经过CSS中Media Query（媒介查询）@media功能，来判断咱们的终端设备宽度在多少像素内，而后就执行与之对应的CSS样式。
下面我就以我最近作的一个简单的响应式布局框架为案列给你们讲讲：
代码以下：


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


经过上面代码可知：它是经过@media媒介查询判断来执行的CSS样式，也就是说：若是我要作一个响应式布局网站，同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式，经过@media媒介查询来完成响应式布局。
值得注意的是：在手机设备上，咱们要禁止用户来缩放屏幕。不由止的话，可能在显示上会形成错位，以及显示的不是手机网站的样式。因此，咱们要经过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。
禁止代码以下:
1
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
加在头部标签里
联系我们 沪ICP备2021010478号-7