摘要:前端最基礎的就是。往期內容前端培訓初級階段前端培訓初級階段后記慣例補上主講人文章參考資料引用培訓目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現手淘頁面的終端適配
前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每周四)。
我們要講什么課后作業Iconfont 字體圖標(阿里巴巴矢量字體圖標庫)原理以及實現
Media媒體響應式布局
Flex彈性盒子布局
移動端適配原理 rem(px、em、rem、%、vm)
使用 Media 做一個商品列表,800 以下的屏幕顯示兩列,其他屏幕 width: 200px,能放多少放多少
實現微信群組頭像(盡可能多使用幾種方法),avatar 和 border 都是不需要,我只是為了讓大家看的清楚。單詞居然寫錯了,還復制了好多次,還好我發現了。
實現文字和圖標混排,并盡可能多的顯示文字。(盡可能多的使用幾種方法)
1.文字極多,三圖標
2.文字極多,兩圖標
3.文字不多,兩圖標
4.文字不多,三圖標
使用 Iconfont 做一個微信下面導航
Iconfont是什么?
阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。設計師將圖標上傳到Iconfont平臺,用戶可以自定義下載多種格式的icon,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。
Iconfont 地址
Iconfont 官方幫助中心
原理實現 1) unicode 引用通過修改 @font-face 定義字體,然后替換元素的 font-family。(順便說句題外話,有些網頁防爬,服務端輸出數據1594,前端修改font-fmaily把 1594 對應到 5941,以此來達到看到的數據是對的,爬走的數據是假的。)
@font-face{font-family: "iconfont"; src: url("iconfont.eot"); src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff") format("woff"), url("iconfont.ttf") format("truetype"), url("iconfont.svg#iconfont") format("svg"); } .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;} 3
2) font-class 引用unicode是字體在網頁端最原始的應用方式,特點是:
兼容性最好,支持ie6+,及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小,顏色等等。
但是因為是字體,所以不支持多色。只能使用平臺里單色的圖標,就算項目里有多色圖標也會自動去色。
font-class 是 unicode 使用方式的一種變種,主要是解決 unicode 書寫不直觀,語意不明確的問題。其實和上面相比就是把字符寫在 content: "e502"; 中。
@font-face {font-family: "iconfont"; src: url("iconfont.eot?t=1552637571329"); /* IE9 */ src: url("iconfont.eot?t=1552637571329#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("data:application/x-font-woff2;charset=utf-8;base64,") format("woff2"), url("iconfont.woff?t=1552637571329") format("woff"), url("iconfont.ttf?t=1552637571329") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url("iconfont.svg?t=1552637571329#iconfont") format("svg"); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-h5-copy:before { content: "e502"; }
3) symbol 引用與unicode使用方式相比,具有如下特點:
兼容性良好,支持ie8+,及所有現代瀏覽器。
相比于unicode語意明確,書寫更直觀。可以很容易分辨這個icon是什么。
因為使用class來定義圖標,所以當要替換圖標時,只需要修改class里面的unicode引用。
不過因為本質上還是使用的字體,所以多色圖標還是不支持的。
如何使用?這是一種全新的使用方式,應該說這才是未來的主流,也是平臺目前推薦的用法。這種用法其實是做了一個svg的集合,與上面兩種相比具有如下特點:
支持多色圖標了,不再受單色限制。
通過一些技巧,支持像字體那樣,通過font-size,color來調整樣式。
兼容性較差,支持 ie9+,及現代瀏覽器。
瀏覽器渲染svg的性能一般,還不如png。
選擇你所需要的,然后下載。看demo.html,里面有代碼。
Media媒體響應式布局使用 @media 查詢,可以針對媒體類型、屏幕尺寸來設置樣式。當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
語法
@media mediatype and|not|only (media feature) { CSS-Code; }
媒體類型(mediatype)
值 | 描述 |
---|---|
all | 用于所有設備 |
用于打印機和打印預覽 | |
screen | 用于電腦屏幕,平板電腦,智能手機等 |
speech | 應用于屏幕閱讀器等發聲設備 |
媒體特征(media feature)
測試頁面,常用的其實不多,主要就是判斷設備寬度。
// https://v4.bootcss.com/docs/4.0/layout/overview/#responsive-breakpoints // Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
值 | 描述 |
---|---|
device-height | 定義輸出設備的屏幕可見高度 |
device-width | 定義輸出設備的屏幕可見寬度 |
height | 定義輸出設備中的頁面可見區域高度 |
width | 定義輸出設備中的頁面可見區域寬度 |
max-device-height | 定義輸出設備的屏幕可見的最大高度 |
max-device-width | 定義輸出設備的屏幕最大可見寬度 |
max-height | 定義輸出設備中的頁面最大可見區域高度 |
max-width | 定義輸出設備中的頁面最大可見區域寬度 |
min-device-width | 定義輸出設備的屏幕最小可見寬度 |
min-device-height | 定義輸出設備的屏幕的最小可見高度 |
min-height | 定義輸出設備中的頁面最小可見區域高度 |
min-width | 定義輸出設備中的頁面最小可見區域寬度 |
orientation | 定義輸出設備中的頁面可見區域高度是否大于或等于寬度 |
Flex布局是什么?
2009年,W3C 提出了一種新的方案—- Flex布局,可以簡便、完整、響應式地實現各種頁面布局。目前,它已經得到了所有瀏覽器的支持,這意味著,很快就能很安全的使用。Flex 是 Flexible Box 的縮寫,意為”彈性布局”,用來為盒狀模型提供最大的靈活性。
容器的屬性(父級)
屬性名 | 屬性值 | 默認值 | 描述 |
---|---|---|---|
display | flex inline-flex | static | 定義為彈性盒子 |
flex-direction | row(主軸為水平方向,起點在左端) row-reverse(主軸為水平方向,起點在右端) column(主軸為垂直方向,起點在上沿) column-reverse(主軸為垂直方向,起點在下沿) |
row | 排列方向 |
flex-wrap | nowrap(不換行) wrap(換行,第一行在上方) wrap-reverse(換行,第一行在下方) |
nowarp | 內容放不下,如何換行 |
flex-flow | row nowarp | 是flex-direction屬性和flex-wrap屬性的簡寫形式 | |
justify-content | flex-start(左對齊) flex-end(右對齊) center(居中) space-between(兩端對齊) space-around(每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍); |
flex-start | 主軸上的對齊方式,默認來說就是水平對齊text-align |
align-items | flex-start(頂部) flex-end(底部) center(居中) baseline(文字基線) stretch(垂直拉伸); |
stretch | 交叉軸對齊方式,默認來說就是垂直對齊vertical-align |
align-content | flex-start(頂部) flex-end(底部) center(居中) space-between(軸線之間的間隔平均分布) space-around(每根軸線兩側的間隔都相等) stretch(軸線占滿整個交叉軸) |
stretch | 定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。 |
項目的屬性(子集、子元素)
order 定義項目的排列順序。數值越小,排列越靠前,默認為0。(數值是有極限的,demo)
flex-grow 屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據的剩余空間將比其他項多一倍。
flex-shrink 定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。如果所有項目的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性為0,其他項目都為1,則空間不足時,前者不縮小。負值對該屬性無效。
flex-basis 定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。它可以設為跟width或height屬性一樣的值(比如350px),則項目將占據固定空間。
flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性,而不是多帶帶寫三個分離的屬性,因為瀏覽器會推算相關值。
align-self 屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。
注意,設為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。移動端適配原理 rem(px、em、rem、%、vm)
移動端適配要解決的問題
各終端下的適配問題(寬度 640 750)
Retina屏的細節處理 (iOS)
如何解決問題
rem 基于 html 的 font-size。實時更新 font-size 和屏幕寬度成比例,基于屏幕寬度適配
其中又分為基于媒介查詢
@media screen and (min-width:350px){html{font-size:342%;}} @media screen and (min-width:360px){html{font-size:351.5625%;}} @media screen and (min-width:375px){html{font-size:366.2%;}} @media screen and (min-width:384px){html{font-size:375%;}} @media screen and (min-width:390px){html{font-size:380.859%;}} @media screen and (min-width:410px){html{font-size:400%;}} @media screen and (min-width:432px){ /* 魅族3 */html{font-size:421.875%;}} @media screen and (min-width:480px){html{font-size:469%;}} @media screen and (min-width:540px){html{font-size:527.34%;}} @media screen and (min-width:640px){html{font-size: 625%;}} @media screen and (min-width:768px){html{font-size: 750%;}}
基于寬度計算(設計稿為 640)*0.15625
Flexible 也就是我們常說的手淘H5頁面的終端適配方案
vw/vh/vmin/vmax 新單位,直接基于屏幕寬度適配
vw 代表寬度分為 100 份。
vh 代表屏幕高度分為 100 份。
vmin 代表寬高最小值分為 100 份。
vmax 代表寬高最大值分為 100 份。
基于媒介查詢做(太費事了)
合理的 viewport
上面說了那么多,其實還是有坑的,下面我們來說說適配有什么坑。
不知道大家做過那種 ppt 的頁面沒,劃來劃去動畫效果。寬高是沒有比例的。所以在一些屏幕特別長的機型上就露底了。一般來說解決方案就是垂直居中頁面了
手淘方案在新出的曲面屏上表現怪異。那是因為他這個方案有一個最大值,而曲面屏超過了這個極限值。解決方案呢兩個
vw
水平居中頁面咯。
往期內容前端培訓-初級階段(1 - 4)
前端培訓-初級階段(5 - 8)
后記慣例補上主講人文章
參考資料(引用) 培訓目錄出處-已備份到筆記
Iconfont字體生成原理及使用技巧
CSS3 @media 查詢 --runoob
再聊移動端頁面的適配
Flex 布局教程:語法篇 --ruanyifeng
Flex 布局教程:實例篇 --ruanyifeng
使用Flexible實現手淘H5頁面的終端適配 #17
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110170.html
摘要:前端培訓初級階段語法變量值類型運算符語句前端培訓初級階段內置對象函數前端培訓初級階段類模塊繼承基礎內容知識我們會用到。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每周四)。 該文為前端培訓-初級階段(1...
摘要:在掘金摸魚的時候看到了一個題第題搜索如何防抖,如何處理中文輸入,感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發。輸入法狀態輸入內容。輸入法選擇之后觸發。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我...
摘要:在掘金摸魚的時候看到了一個題第題搜索如何防抖,如何處理中文輸入,感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發。輸入法狀態輸入內容。輸入法選擇之后觸發。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我...
摘要:前端培訓初級階段語法變量值類型運算符語句前端培訓初級階段內置對象函數基礎內容知識我們會用到。模塊定義加載模塊繼承中的繼承依賴于原型鏈繼承。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每周四)。 該文為前...
摘要:前端最基礎的就是。但是如果是盜竊,異常提交請求,這些就屬于危險操作。可以用來偽裝成其他用戶操作,有可能就會造成財產上的損失。劫持有的時候運營商的劫持還是沒辦法。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦...
摘要:前端最基礎的就是。這是初級階段的最后一堂了。敏感數據要設置防止意外的被他人獲取。是什么服務器端存放數據。都是用來做瀏覽器端存儲的。解決的問題的存儲大小問題。該使用索引來實現對該數據的高性能搜索。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,...
閱讀 1369·2021-10-13 09:39
閱讀 1333·2021-09-23 11:22
閱讀 2243·2019-08-30 14:05
閱讀 1059·2019-08-29 17:03
閱讀 770·2019-08-29 16:24
閱讀 2227·2019-08-29 13:51
閱讀 656·2019-08-29 13:00
閱讀 1290·2019-08-29 11:24