這段時間一直在學習前端的東西記錄一下自己所欠缺的東西!
響應式布局
由於以前基本上沒有接觸前端的東西,熟悉又陌生,熟悉是因為經常聽見同事在說,陌生是因為自己沒有實踐過!
查詢[**查詢],剛開始我看名字以為是查詢之類的
說明:通過不同的**型別和條件定義樣式表規則。
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完整css:>
<
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
>
@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 這個就是 特性,說得通俗一點就是 條件。前面這個簡單的例項引出兩個概念性的東西,乙個就是 型別...