資訊專欄INFORMATION COLUMN
摘要：任務三一個最簡單的移動端頁面今天完成的事情運用布局知識跟隨設計圖進行布局，完成簡單并繼續學習優化讓布局更好適應屏幕變化使用了盒模型及百分比了解區別在中應用圖片處理學習明天計劃的事情深度思考手機分辨率和網頁的區別周末補學任務四計劃及簡單編寫遇
任務三、 一個最簡單的移動端頁面 今天完成的事情
運用布局知識跟隨設計圖進行布局，完成簡單Demo并繼續學習優化.
讓布局更好適應屏幕變化(使用了盒模型及百分比).
了解rem&em&px區別 & 在Demo中應用rem.
圖片處理學習.
明天計劃的事情
[ ] 深度思考：手機分辨率和網頁px的區別(TODO:周末補學)
link1
link2
link3
[ ] 任務四計劃及簡單編寫
遇到的問題暫無
收獲 1. 運用布局知識進行更復雜的布局
借助盒模型完成布局
明確目標：完成簡單Demo，找出不足繼續學習優化，目標效果如下
編碼
設計圖尺寸為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圖不一樣呀=。=)
先嘗試對剛才寫的Demo應用屏幕改變的效果
425px&768px的效果圖與現在對比
后退按鍵與title變化不大
container的左右margin過小
contacts的頂部margin過小
修改
將container左右margin改為百分比
將context和contacts中間改為margin和padding的組合
結果：基本完成與設計圖的重合
參考：
CSS3的REM設置字體大小
rem與em的使用和區別詳解
視區相關單位vw, vh..簡介以及可實際應用場景
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
實際使用：
元素嚴格不可縮放時，使用px
一切可擴展都應該用rem, 包括媒體查詢
千萬不要用em控制字體的大小
em用于縮放一些沒有默認字體大小的元素，當字體變大整個組件也能隨之變大
多列布局用%較好
vw、vh、vm做頁面排版很厲害，但是兼容做得比較晚，所以優先還是用rem和%解決問題
在task3中應用rem.(已完成)
4. 深度思考
如何從UI圖中獲取所需信息（使用Photoshop）參考：前端工程師技能之photoshop巧用系列
終極目標：視覺設計師是怎樣讓前端工程師 100% 實現設計效果的
頁面大致布局獲取: 視圖-標尺，視圖-新建參考線，將頁面分塊大致確定布局；
字體獲取: 左側欄-文字工具，點擊目標文字查看字體屬性
圖片獲取:
圖層中有現有素材: 選中所需圖層，右鍵快速導出為PNG
圖層中無現有素材: 前端工程師技能之photoshop巧用系列第三篇——切圖篇
顏色獲取：左側欄-吸管工具，然后在拾色器中獲取顏色值
如何進行自適應網頁設計 參考：自適應網頁設計（Responsive Web Design）
允許網頁寬度自動調整
不使用絕對寬度布局，多用%和auto
字體多用rem
使用流式布局，謹慎使用絕對布局
使用媒體響應
根據屏幕大小加載圖片
margin和padding使用時機：根據盒模型,padding是盒子內部填充物,margin是盒子與其他物品保持的距離，所以用padding來擴充(撐大)盒子，用margin來保持距離
css選擇器優先級 參考:優先級-CSS：層疊樣式表
從上到下優先級遞增：
對優先級無影響：通配符選擇器(*) & 關系選擇符(+,>,~) & 否定偽類(:not())
類型選擇器(h1) & 偽元素(::before)
類選擇器(.btn) & 屬性選擇器(type="radio") & 偽類(:hover)
ID選擇器(#navbar)
內聯樣式(style)
覆蓋任何聲明：!important
效果Github
線上展示
系列文章【CSS練習】IT修真院--練習1-九宮格
【CSS練習】IT修真院--練習2-開發工具
【CSS練習】IT修真院--練習3-簡單界面
【CSS練習】IT修真院--練習4-移動端界面
【CSS練習】IT修真院--練習5-護工個人界面
【CSS練習】IT修真院--練習6-護工列表界面
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113428.html
摘要：任務六護工列表頁完成的事情規劃任務六完成基本界面編寫計劃的事情限制最小寬度使用雪碧圖替換當前的多張圖片引入完成模擬下拉框編寫屏幕過窄時，列表項左邊文字被截斷出現省略號復習之前的代碼規范，優化代碼查看驗收標準查看深度思考遇到的問題收獲頁面原生 任務六、 護工列表頁 完成的事情 1.規劃任務六2.完成基本界面編寫 計劃的事情 [x] 限制最小寬度 [x] 使用雪碧圖替換當前的多張圖片引入...
摘要：任務二認識開發工具今天完成的事情編輯器對比版本管理工具學習基本操作代碼托管平臺對比服務器使用學習明天計劃的事情分析任務三完成規劃及部分開發遇到的問題暫無收獲編輯器對比參考三者比較，各有哪些優勢和弱勢一款成熟的，對網站開發者友好，插件齊全功能 任務二. 認識開發工具 今天完成的事情 IDE & 編輯器對比 版本管理工具學習 Git基本操作 代碼托管平臺對比 服務器使用學習 明天計劃的...
摘要：用于顯示日志信息及輸入一些命令請求監聽。可獲得請求列表，點開某一項將看到數據頭部數據。包含本次請求的請求方法狀態碼請求服務器的地址其他一些設置響應頭部包含用戶代理，幫服務器識別設備用預覽。 九宮格——用html+css制作一個網頁 一. 目標效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圓角...
摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一 任務四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優化 完成驗收要求：header擴展性 & 頂欄固定 進行p...
摘要：任務五一個最常見的移動端頁面完成的事情學習張鑫旭世界相關章節張鑫旭系列了解通配符選擇器性能優化瀏覽器渲染原理學習各屬性及效果完成任務五學習編碼規范編碼規范并按照編碼規范優化代碼完成深度思考計劃的事情找時間把前面任務的官方提供鏈接過一遍，查缺 任務五、 一個最常見的移動端頁面 完成的事情 float學習 張鑫旭《CSS世界》相關章節 張鑫旭 float系列 了解CSS通配符 &...
閱讀 1610·2023-04-26 02:43
閱讀 3018·2021-11-11 16:54
閱讀 1351·2021-09-23 11:54
閱讀 1171·2021-09-23 11:22
閱讀 2367·2021-08-23 09:45
閱讀 852·2019-08-30 15:54
閱讀 3101·2019-08-30 15:53
閱讀 3189·2019-08-30 15:53
