css自媒體查詢

準備工作1：設置Meta標簽

首先我們在使用Media的時候需要先設置下面這段代碼，來兼容移動設備的展示效果：

  1. <meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=no">

這段代碼的幾個參數解釋：

  • width = device-width：寬度等于當前設備的寬度

  • initial-scale：初始的縮放比例（默認設置為1.0） ?

  • minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）? ??

  • maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）? ?

  • user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）?

準備工作2：加載兼容文件JS

因為IE8既不支持HTML5也不支持CSS3 Media，所以我們需要加載兩個JS文件，來保證我們的代碼實現兼容效果：

  1. <!--[if?lt?IE?9]>
  2. ??<script?src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  3. ??<script?src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  4. <![endif]-->

準備工作3：設置IE渲染方式默認為最高(這部分可以選擇添加也可以不添加)

現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8:

為了防止這種情況，我們需要下面這段代碼來讓IE的文檔模式永遠都是最新的：

  1. <meta?http-equiv="X-UA-Compatible"?content="IE=edge">

不過我最近又發現了一個更給力的寫法：

  1. <meta?http-equiv="X-UA-Compatible"?content="IE=Edge，chrome=1">

怎么這段代碼后面加了一個chrome=1，這個Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），如果有的用戶電腦里面裝了這個chrome的插件，就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過如果用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上，不過不用也是可以的。

以上內容摘自http://blog.csdn.net/yuzhongkai/article/details/51041937

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{background: red}@media screen and  (min-width:600px) and  (max-width:1200px){body{background: greenyellow} }@media screen and  (max-width:600px){body{background: rgb(47, 102, 255)} }/* 頁面寬度大于1200背景紅色 1200-600綠色  小于600藍色 */</style>
</head>
<body>   
</body>
</html>

常用的自媒體查詢樣式

?特性名值應用場景
?width
?min-width
?max-width		?顯示區域的寬度（對打印機而言是打印表面）?改變布局以適應非常窄（如手機）或非常寬的顯示器。
?height
?min-height
?max-height		?顯示區域的高度?改變布局以適應非常長或非常短的顯示器
?device-width
?min-device-width
?max-device-width		?當前計算機或設備屏幕的寬度
（或打印輸出時紙面的寬度）		?根據不同設備（如手機）調整布局
?device-height
?min-device-height
?max-device-height		?屏幕或紙面的高度?根據不同設備（如手機）調整布局
?orientation?landscape（橫向）或portrait（縱向）?根據設備的朝向調整布局
?device-aspect-ratio
?min-device-aspect-ratio
?max-device-aspect-ratio		?顯示區域的寬高比（1/1是正方形）?根據窗口形狀調整樣式（問題可能比較復雜）
?color
?min-color
?max-color		?屏幕顏色的位深
（1位表示黑白，目前主流顯示器都是24位）		?檢查是否支持彩色輸出（比如是不是黑白打印），
?或者支持的顏色數量
樣式表用法
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="1.css""><link rel="stylesheet" href="2.css" media="(max-width:800px)">
</head>
<body>  <div><ul><li>1是大哥，哈哈哈哈哈哈哈哈哈！</li><li>2是大哥，哈哈哈哈哈哈哈哈哈！</li><li>3是大哥，哈哈哈哈哈哈哈哈哈！</li><li>4是大哥，哈哈哈哈哈哈哈哈哈！</li><li>5是大哥，哈哈哈哈哈哈哈哈哈！</li><li>6是大哥，哈哈哈哈哈哈哈哈哈！</li><li>7是大哥，哈哈哈哈哈哈哈哈哈！</li><li>8是大哥，哈哈哈哈哈哈哈哈哈！</li></ul></div>   
</body>
</html>

?1.css

body{margin: 0;width: 100%;
}
div{text-align: center;margin: auto
}
ul{display: flex;list-style: none;justify-content: center;flex-wrap:nowrap
}
li{line-height: 30px;background: red;width: 300px;margin: 20px;font-size: 30px
}

?

2.css

body{margin: 0;width: 100%;
}
div{text-align: center;margin: auto
}
ul{display: flex;list-style: none;justify-content: center;flex-wrap:wrap
}
li{line-height: 30px;background: rgb(25, 0, 255);width: 300px;margin: 20px;font-size: 10px
}

?

?

轉載于:https://www.cnblogs.com/douyaer/p/7856090.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251509.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251509.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251509.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

css --- 清除浮動

css --- 清除浮動

有時我們需要用到浮動,但又不想由于浮動的某些特性影響布局,這時就需要清除浮動 清除浮動主要應用的是CSS中的clear屬性,clear屬性定義了元素的哪一側不允許出現浮動元素. 下面是兩種應用比較廣泛的清除浮動的方法: // 在需要的地方添加定義了clear:both的空標簽 <style>…
閱讀更多...
數據可視化實現技術（canvas/svg/webGL）

數據可視化實現技術（canvas/svg/webGL）

數據可視化的實現技術和工具比較轉載于:https://www.cnblogs.com/knuzy/p/9215632.html
閱讀更多...
Python 字符串操作（string替換、刪除、截取、復制、連接、比較、查找、包含、大小寫轉換、分割等）...

Python 字符串操作（string替換、刪除、截取、復制、連接、比較、查找、包含、大小寫轉換、分割等）...

http://www.cnblogs.com/huangcong/archis.strip() .lstrip() .rstrip(,) 去空格及特殊符號復制字符串Python1 #strcpy(sStr1,sStr2)2 sStr1 strcpy3 sStr2 sStr14 sStr1 strcpy25 print sStr2連接字符串Python1 #strcat(sStr1,sStr2)2 sStr1 strcat3 sStr2 append4 sStr1…
閱讀更多...
java 將一個非空文件夾拷貝到另一個地方

java 將一個非空文件夾拷貝到另一個地方

沒有處理異常&#xff0c;只是簡單的拋出了。需要捕獲的需修改一下。 public class Test001 { //把一個文件夾或文件移到另一個地方去。 public static void main(String[] args) throws Exception { File filenew File("D:\\testFolder"); new Test001().copyFileTo…
閱讀更多...
Python環境 及安裝

Python環境 及安裝

windows 1、下載安裝包 https://www.python.org/downloads/2、安裝默認安裝路徑&#xff1a;C:\python273、配置環境變量【右鍵計算機】--》【屬性】--》【高級系統設置】--》【高級】--》【環境變量】--》【在第二個內容框中找到 變量名為Path 的一行&#xff0c;雙擊】 -->…
閱讀更多...
MUI主界面菜單同時移動主體部分不出滾動條解決

MUI主界面菜單同時移動主體部分不出滾動條解決

mOffcanvas(側滑導航-主界面、菜單同時移動) 生成代碼 增加列表滾動OK 增加幻燈片就掛了 百度了半天 沒發現問題 后來想起官網的一句話 除頂部導航、底部選項卡兩個控件之外&#xff0c;其它控件都建議放在.mui-content控件內&#xff0c;在Hbuilder中輸入mbody&#xff0c;可快…
閱讀更多...
范圍查詢 BETWEEN AND

范圍查詢 BETWEEN AND

查詢&#xff1a;從表t_student里 查找 id 在1~10 之間的學生信息&#xff0c;并顯示 id,name,age,email 信息 SELECT id,name,age,email FROM t_student WHERE id BETWEEN 1 AND 10轉載于:https://www.cnblogs.com/hello-dummy/p/9216720.html
閱讀更多...
css --- 應用媒介查詢制作響應式導航欄

css --- 應用媒介查詢制作響應式導航欄

以上導航會自動適應各個尺寸的屏幕 代碼如下: <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <meta name"apple-mobile-w…
閱讀更多...
AODV中實施watchdog

AODV中實施watchdog

1.開啟混雜模式&#xff0c;接收鄰居轉發的所有數據包&#xff0c;不進行MAC過濾&#xff0c;全部 sendToWatchdog(const Packet *p) 2.當前節點轉發數據包后&#xff0c;緩存數據包 sendToWatchdog(const Packet *p, int mac_dst) //Start Watchdog Code voidAODV::tap(const …
閱讀更多...
Drools 7.4.1.Final參考手冊（六） 用戶手冊

Drools 7.4.1.Final參考手冊（六） 用戶手冊

用戶手冊 基礎 無狀態的知識Session Drools規則引擎擁有大量的用例和功能&#xff0c;我們要如何開始&#xff1f;你無須擔心&#xff0c;這些復雜性是分層的&#xff0c;你可以用簡單的用例來逐步入門。 無狀態Session&#xff0c;無須使用推理&#xff0c;就形成了最簡單的用…
閱讀更多...
css --- 彈性盒子

css --- 彈性盒子

左右兩側按1:1自適應,中間固定寬度500px // CSS /* 首先定義 container &#xff0c;關注display */ /* webkit 是Chrome、Safari 的瀏覽器前綴 */ .container{margin: auto;display: -webkit-box;width: 80%&#xff1b;height: 200px; } /* 開始定義左、中、右 */ .left { …
閱讀更多...
更精煉更專注的RTMPClient客戶端EasyRTMPClient，滿足直播、轉發、分析等各種需求...

更精煉更專注的RTMPClient客戶端EasyRTMPClient，滿足直播、轉發、分析等各種需求...

現狀 EasyRTMPClient&#xff0c;熟悉的朋友就會聯想到EasyRTSPClient項目&#xff08;https://github.com/EasyDSS/EasyRTSPClient&#xff09;&#xff0c;EasyRTSPClient從14年中期開始發展&#xff0c;已經迭代發展歷時3年多時間&#xff0c;可以說在RTSPClient領域是非常成…
閱讀更多...
數據操縱語言 ,DML, 增刪改

數據操縱語言 ,DML, 增刪改

DML(data manipulation language)&#xff1b;數據操縱語言 插入數據&#xff1a;插入數據&#xff1a; 每次只能插入一行數據 INSERT INTO 表名(列名1, 列名2, 列名3....) VALUES (value1, value2, value3....); value與列數一一對應。 #插入一行: INSERT INTO t_student(id,…
閱讀更多...
bootstrap --- 表格

bootstrap --- 表格

幾個可選類: .table-bordered: 為表格加上邊框 .table-striped: 為表格加上斑馬效果 .table-hover: 鼠標懸停在表格行上時展現不同得顏色 .table-condensed: 更為緊湊的表格樣式 // 導入樣式,從bootstrap官網導入CDN // HEAD <link rel"stylesheet" href"…
閱讀更多...
發現一個小坑的地方，unity的協程，想要停止，必須以字符串啟動

發現一個小坑的地方，unity的協程，想要停止，必須以字符串啟動

今天想要停止一個協成&#xff0c;發現調用 StopCoroutine(ShowDebug()); 竟然不管用&#xff0c;后來看了文檔才知道&#xff0c;原來想要停止協成&#xff0c;必須用字符啟動協程 StartCoroutine("ShowDebug"); 然后再調用 StopCoroutine("ShowDebug…
閱讀更多...
mongodb數據庫中插入數據

mongodb數據庫中插入數據

mongodb數據庫中插入數據 一&#xff1a;connection 訪問集合&#xff1b; 在mongodb數據庫中&#xff0c;數據是存儲在許多數據集合中&#xff0c;可以使用數據庫對象的collection方法訪問一個集合。該方法使用如下&#xff1a; db.collection(collectionName, [options], [ca…
閱讀更多...
bootstrap --- 表單

bootstrap --- 表單

// HTML >>> 第一種樣式 <!DOCTYPE html> <html> <head><link rel"stylesheet" href"https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity"sha384-Gn5384xqQ1aoWXA058RXPxPg6fy4IWvTNh0E263XmF…
閱讀更多...
linux新建用戶，用戶組，以及權限的分配(摘自博客園)

linux新建用戶，用戶組，以及權限的分配(摘自博客園)

linux新建用戶&#xff0c;用戶組&#xff0c;以及權限的分配 原文url&#xff1a;https://www.cnblogs.com/clicli/p/5943788.html Linux 系統是一個多用戶多任務的分時操作系統&#xff0c;任何一個要使用系統資源的用戶&#xff0c;都必須首先向系統管理員申請一個賬號&a…
閱讀更多...
BZOJ3555: [Ctsc2014]企鵝QQ

BZOJ3555: [Ctsc2014]企鵝QQ

【傳送門&#xff1a;BZOJ3555】 簡要題意&#xff1a; 給出n個字符串長度為m&#xff0c;給出字符串的字符種數&#xff0c;求出相似的字符串個數 相似字符串的定義為&#xff1a;相同位置上兩個字符串有且只有一個字符不相同時&#xff0c;兩個字符串相似 題解&#xff1a; 亂…
閱讀更多...
bootstrap --- 按鈕

bootstrap --- 按鈕

<head><!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/bootstrap3.3.7/dist/css/bootstrap.min.css" integrity"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4VaPmSTs…
閱讀更多...
最新文章

Copyright @ 2022~2023