自丟網

 找回密碼
 立即注冊
搜索
打印 上一主題 下一主題

使用@media screen 實現網頁布局的自適應,@media screen and方法教程

[復制鏈接]
跳轉到指定樓層
樓主
admin 發表于 2019-7-2 21:57:38 | 查看: 49|回復: 1 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
使用@media screen 實現網頁布局的自適應,@media screen and方法教程
1、在link中使用media 屬性判斷屏幕寬高,可以引用不同的css文件:
  1. <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 800px)">
復制代碼
2、寫在樣式文件中,通過@media screen判斷屏幕寬高適應不同分辨率。在不同的寬高下寫不同的樣式類屬性:
  1. /*適應寬度*/
  2. @media screen and (max-width: 1365px) {
  3.   body {
  4.     font-size: 10px;
  5.   }
  6. }
  7. @media screen and (min-width: 1366px) and (max-width: 1599px) {
  8.   body {
  9.     font-size: 12px;
  10.   }
  11. }
  12. @media screen and (min-width: 1600px) and (max-width: 1919px) {
  13.   body {
  14.     font-size: 14px;
  15.   }
  16. }
  17. @media screen and (min-width: 1920px) {
  18.   body {
  19.     font-size: 16px;
  20.   }
  21. }
  22. /*適應高度*/
  23. @media screen and (min-height: 901px) and (max-height: 1080px){
  24.   body {
  25.     font-size: 16px;
  26.   }
  27. }
  28. @media screen and (min-height: 800px) and (max-height: 900px){
  29.   body {
  30.     font-size: 16px;
  31.   }
  32. }
復制代碼

推薦給好友: [復制鏈接]
上一篇:織夢dedecms點擊數量標簽代碼教程摘要:織夢dedecms點擊數量標簽代碼教程 或者 ...
下一篇:HTML條件注釋判斷IE&lt;!--[if IE]&gt;&lt;!--[if lt IE 9]&gt;--&gt;方法教程摘要:HTML條件注釋判斷IE<!--><!-->-->方法教程 在wordpre ...
樓主熱帖
回復

使用道具 舉報

沙發
 樓主| admin 發表于 2019-7-25 07:33:08 | 只看該作者
回復

使用道具 舉報

網站地圖|百度統計|免責聲明|Archiver|手機版|小黑屋|ZiDiu.Com ( 粵ICP備17166275號 )

GMT+8, 2019-8-12 19:51 , Processed in 0.187500 second(s), 35 queries .

Powered by Discuz!

© Comsenz Inc.

快速回復 返回頂部 返回列表
鸟叔彩金