前端響應式布局

這段時間一直在學習前端的東西記錄一下自己所欠缺的東西！

響應式布局 

由於以前基本上沒有接觸前端的東西，熟悉又陌生，熟悉是因為經常聽見同事在說，陌生是因為自己沒有實踐過!

查詢[**查詢]，剛開始我看名字以為是查詢之類的

說明:通過不同的**型別和條件定義樣式表規則。

ok!我已經了基本上了解響應式布局是幹嘛的了——————為了適應pc丶移動丶平板等

html：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>**查詢
此時寬度為768px顯示為blue沒問題！
寬度小於760px大於420px 為什麼還是顯示blue？
bug就來了這是為什麼吶？檢視html**，發現了乙個問題少了一行重要的**。
<

meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
這一句重要的**沒有寫！加進去測試！

ok！這下就可以寫css**了
完整html:
doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>**查詢
title
>
<
link 
rel="stylesheet"
href
="css/index.css"
>
head
>
<
body
>
body
>
html
>
完整css:

@media screen and (max-width:760px) and (min-width:320px)}

@media screen and (min-width:760px)}
 
前端之響應式布局
就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本，可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗。在標頭檔案中新增乙個meta標籤 其中，width device width 這一句的意思是讓頁面的寬度等於螢幕的寬度。rem 指的是 html 元素的 font size，ht...
web前端 響應式布局
隨著移動裝置的流行，網頁設計必須要考慮到移動端的設計。同乙個 為了相容pc端和移動端顯示，就需要進行響應式開發。利用 查詢，讓同乙個 相容不同的終端 pc端 移動端 呈現不同的頁面布局。css3 media查詢 用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸 是否可觸控 螢幕精度 橫屏豎...
前端積累 響應式布局（二）
先看乙個簡單的例子 上面的media語句表示的是 當頁頁寬度小於或等於600px,呼叫small.css樣式表來渲染你的web頁面。首先來看media的語句中包含的內容 3 max width 600px 這個就是 特性，說得通俗一點就是 條件。前面這個簡單的例項引出兩個概念性的東西，乙個就是 型別...