【CSS練習】IT修真院--練習3-簡單界面

時間 2019-11-10

標籤 CSS練習練習簡單界面欄目 CSS 简体版

原文原文鏈接

任務3、一個最簡單的移動端頁面

今天完成的事情

運用佈局知識跟隨設計圖進行佈局，完成簡單Demo並繼續學習優化.
讓佈局更好適應屏幕變化(使用了盒模型及百分比).
瞭解rem&em&px區別 & 在Demo中應用rem.
圖片處理學習.

明天計劃的事情

[ ] 深度思考：手機分辨率和網頁px的區別(TODO:週末補學)css
- link1
- link2
- link3
[ ] 任務四計劃及簡單編寫

遇到的問題

暫無

收穫

1. 運用佈局知識進行更復雜的佈局

藉助盒模型完成佈局html
- 明確目標：完成簡單Demo，找出不足繼續學習優化，目標效果以下
  前端
  - 編碼css3
    - 設計圖尺寸爲640*1136,因而在瀏覽器選擇相同比例的iPhone5/SE(320*568)進行模擬
    - 新建index.html並編寫簡單佈局div及css，將頁面縱向分爲topbar&container兩個部分, 其中topbar包含着後退按鈕，container包含title、content、contact三個部分. 接着經過在PS界面上畫參考線方法，簡單得到頁面各部分比例，並以此爲依據完善CSS，效果以下圖所示:
    - 在PhotoShop中找到圖層工做區，找到將要用到的素材點擊右鍵-快速導出爲PNG(因爲有素材圖因此不須要使用切圖工具)，並用吸管工具獲取背景顏色，再在拾色器(前景色)獲取背景色#68cdd6
    - 接下來將圖片素材引入index.html中，調整圖片長寬
    - 截取效果圖GIF的320*650來與當前Demo作對比(吐槽一下這跟PSD圖不同呀=。=)

2. 讓佈局更好適應屏幕寬度變化

先嚐試對剛纔寫的Demo應用屏幕改變的效果git
- 425px&768px的效果圖與如今對比github
  - 後退按鍵與title變化不大
  - container的左右margin太小
  - contacts的頂部margin太小
- 修改web
  - 將container左右margin改成百分比
  - 將context和contacts中間改成margin和padding的組合
  - 結果：基本完成與設計圖的重合

3. 瞭解rem & em & px & % & vw & wh & vm的區別

參考：segmentfault
1)px：相對長度單位，相對於屏幕的分辨率.瀏覽器
- 特色：前端工程師
  - 優勢：穩定 & 精確
  - 缺點：改變瀏覽器字體大小，佈局會被打破
- 做用：
  - 給定具體大小，協助em和rem重寫具體單位
2)em：相對長度單位，相對於當前元素的文本尺寸,若是當前元素文本尺寸未設置則相對於瀏覽器默認字體尺寸
- 計算公式：targetEM = 1 / parentPX * targetPX;
- 特色：
  - 1.em值不固定; 2.會繼承父類字體大小
  - 缺點：若是不從新計算已被放大字體的em值的話，各層設置的字體大小複合會致使連鎖反應,這個連鎖反應是'繼承'致使的，想要避免繼承的連鎖反應能夠在目標元素上顯式設置px單位的font-size來中止繼承.
  - 總結：em對應px的值取決於其使用字體的大小，此字體大小受父類繼承過來的大小影響，除非顯示重寫一個具體單位.
- 做用：
  - 容許保持在一個特定的設計元素範圍內的可擴展性(應在標識清除的狀況下使用em單位)
3)rem(root em)：相對長度單位,只相對於HTML根元素
- 特色：
  - 優勢：只需修改根元素大小就能夠成比例地調整全部字體大小,且避免了字體大小逐層複合的連鎖反應，且IE8+的瀏覽器都支持
  - Tip：爲應對不支持的瀏覽器,能夠多寫一個絕對單位的聲明，例如：
```
p {font-size:14px; font-size:.875rem;}
```
  - 總結：rem對應px的值取決於html元素字體大小，此大小會被瀏覽器中字體大小的設置影響，除非顯示重寫一個具體單位.
- 做用：
  - 保證不管用戶如何設置本身的瀏覽器，佈局都能調到合適大小
  - 維護用戶擁有本身體驗偏好的權利
4)%
- 特色：
  - 普通元素的百分比定位基於父類.
  - 設置了position: fixed的元素的百分比定位基於瀏覽器窗體.
  - 設置了position: absolute的元素的百分比定位相對於static定位之外第一個父元素進行定位.
5)vw(viewport width, viewport指的是瀏覽器內部可視區域大小)
- 特色：
  - 計算： 1vw = 1% * width_viewport
6)vh(viewport height)
- 特色：
  - 計算： 1vh = 1% * height_viewport
7)vm(viewport min)
- 特色：
  - 計算： 1vm = 1% * (width<height?width: height)
實際使用：
- 元素嚴格不可縮放時，使用px
- 一切可擴展都應該用rem, 包括媒體查詢
- 千萬不要用em控制字體的大小
- em用於縮放一些沒有默認字體大小的元素，當字體變大整個組件也能隨之變大
- 多列布局用%較好
- vw、vh、vm作頁面排版很厲害，可是兼容作得比較晚，因此優先仍是用rem和%解決問題
在task3中應用rem.(已完成)

4. 深度思考

如何從UI圖中獲取所需信息（使用Photoshop）參考：前端工程師技能之photoshop巧用系列
- 終極目標：視覺設計師是怎樣讓前端工程師 100% 實現設計效果的
- 頁面大體佈局獲取: 視圖-標尺，視圖-新建參考線，將頁面分塊大體肯定佈局；
- 字體獲取: 左側欄-文字工具，點擊目標文字查看字體屬性
- 圖片獲取:
  - 圖層中有現有素材: 選中所需圖層，右鍵快速導出爲PNG
  - 圖層中無現有素材: 前端工程師技能之photoshop巧用系列第三篇——切圖篇
- 顏色獲取：左側欄-吸管工具，而後在拾色器中獲取顏色值
如何進行自適應網頁設計參考：自適應網頁設計（Responsive Web Design）
- 容許網頁寬度自動調整 <meta name="viewport" content="width=device-width, initial-scale=1" />
- 不使用絕對寬度佈局，多用%和auto
- 字體多用rem
- 使用流式佈局，謹慎使用絕對佈局
- 使用媒體響應
- 根據屏幕大小加載圖片
margin和padding使用時機：根據盒模型,padding是盒子內部填充物,margin是盒子與其餘物品保持的距離，因此用padding來擴充(撐大)盒子，用margin來保持距離
css選擇器優先級參考:優先級-CSS：層疊樣式表
- 從上到下優先級遞增：
  - 對優先級無影響：通配符選擇器(*) & 關係選擇符(+,>,~) & 否認僞類(:not())
  - 類型選擇器(h1) & 僞元素(::before)
  - 類選擇器(.btn) & 屬性選擇器(type="radio") & 僞類(:hover)
  - ID選擇器(#navbar)
  - 內聯樣式(style)
  - 覆蓋任何聲明：!important