拉勾教育前端就業(yè)訓(xùn)練營學(xué)習(xí)筆記1-4
時(shí)間：2023-07-02 16:24:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-02 16:24:01 來源：網(wǎng)站運(yùn)營
拉勾教育前端就業(yè)訓(xùn)練營學(xué)習(xí)筆記1-4：
5自學(xué)新樣式網(wǎng)站
2倍精靈圖制作方法
上方修改-畫布-圖像大小 修改尺寸為原來的一半
移動(dòng)端清除特殊樣式
清除點(diǎn)擊高亮
-webkit-tap-highlight-color:transparent;
再一定瀏覽器默認(rèn)外觀在ios上加上此屬性才能給按鈕和輸入框自定義樣式
input {
-webkit-appearance：none；
禁用長按頁面時(shí)彈出菜單
img，a{
-webkit-touch-callout:none;
}
移動(dòng)端瀏覽器是主要對webkit內(nèi)核兼容
主要針對手機(jī)端開發(fā)
碎片化較嚴(yán)重，只需關(guān)注手機(jī)端常見開發(fā)尺寸
移動(dòng)端調(diào)試方法
- 谷歌瀏覽器中有模擬手機(jī)查看效果：右鍵 檢查 控制臺左上方 切換到設(shè)備工具
- 搭建本地web服務(wù)器，通過手機(jī)服務(wù)器訪問
- 通過外網(wǎng)服務(wù)器
視口
viewport 瀏覽器顯示內(nèi)容的屏幕區(qū)域。分為布局視口、視覺視口、理想視口
一般的移動(dòng)瀏覽器都默認(rèn)設(shè)置了一個(gè)布局視口，用于早期解決pc端界面在手機(jī)端顯示問題
ios, Android i基本都將這個(gè)視口分辨率設(shè)置為98px,所以PC上的網(wǎng)頁大多都能在手機(jī)上呈現(xiàn),只不過元素看上去很小,一般默認(rèn)可以通過手動(dòng)縮放網(wǎng)頁。
是用戶正在看到的
網(wǎng)站的區(qū)域.我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。
為了使網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定。對設(shè)備來講，是最理想的視口尺寸。需要手動(dòng)添寫<meta>視D標(biāo)簽通知瀏覽器操作。
<meta>視口標(biāo)簽的主要目的: 布局見口的寬度應(yīng)該與理想視口常見的寬度一致。
設(shè)備有多寬，我們布局的視口就寬二倍圖 -------------------------------物理像素&物理像素比物理像素點(diǎn)指的是屏幕顯示的最小顆粒，是物理真實(shí)存在的。這是廠商在出廠時(shí)就設(shè)置好了。我們開發(fā)時(shí)候的1px不是一定等于 1個(gè)物理像素的。
PC端頁面，1個(gè)px等于1個(gè)物理像素的，移動(dòng)端不一定
物理像素比或屏幕像素比：一個(gè)px的能顯示的物理像素點(diǎn)的個(gè)數(shù)
啟動(dòng)圖尺寸 （物理像素）
PC端和早前的手機(jī)屏幕/普通手機(jī)屏幕：1 css像素=1物理像素的
現(xiàn)在大部分手機(jī)采用Retina (視網(wǎng)膜屏幕)，是一種顯示技術(shù)，可以將把更多的物理像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率，并提高屏幕顯示的細(xì)膩程度
多倍圖 ---------------------------------------------------對于一張50px * 50px的圖片,在手機(jī)Retina屏中打開，按照剛才的物理像素比會放大倍數(shù)，這樣會造成圖片模糊
在標(biāo)準(zhǔn)的viewport設(shè)置中，使用倍圖來提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問題。通常使用2倍圖，還存在3倍 4倍 具體看開發(fā)需求
除了插入圖，背景圖也需要注意縮放問題background-size屬性更改
移動(dòng)端主流制作方法 ----------------------------單獨(dú)制作移動(dòng)端頁面（主流）：
pc 移動(dòng)端分開寫。網(wǎng)址域名前面加m（moble），可以打開移動(dòng)端eg：京東 淘寶 蘇寧。通過設(shè)備判斷，加載pc端或移動(dòng)端頁面
響應(yīng)式頁面兼容移動(dòng)端（其次）：
pc 移動(dòng)端使用一套代碼。通過判斷屏幕寬度改變樣式eg：三星。缺點(diǎn)：制作麻煩。需要花很大精力調(diào)兼容問題
移動(dòng)端常見問題解決方案 ------------------------瀏覽器移動(dòng)端瀏覽器基本以webkit內(nèi)核為主，因此我們就考慮webkit兼容性問題。我們可以放心使用H5標(biāo)簽和CSS3樣式。同時(shí)我們?yōu)g覽器的私有前綴我們只需要考慮
添加webkit-前綴即可。
css初始化移動(dòng)端推薦使用normallize.css.可定制。讓不同瀏覽器渲染網(wǎng)頁元素時(shí)形式更統(tǒng)一
優(yōu)點(diǎn):
保護(hù)了有價(jià)值的默認(rèn)值
修復(fù)了瀏覽器的bug，解決了瀏覽器的不-致的默認(rèn)樣式
Normalize.css是模塊化的，提高了易用性
Normalize.css擁有詳細(xì)的文檔
CSS3盒子模型box- sizing --------------傳統(tǒng)模式寬度計(jì)算:盒子的寬度= CSS中設(shè)置的width + border + padding
CSS3盒子模型:盒子的寬度 = CSS中設(shè)置的寬度width里面包含了border和padding。即padding 和border不會撐大盒子。（加一條屬性：box-sizing：border-box）
兩種如何選擇：- 移動(dòng)端可以全部CSS3盒子模型
- PC端如果完全需要兼容，用傳統(tǒng)模式；如果不考慮兼容性，就選擇CSS3盒子模型
特殊樣式
box- sizing: border- box;
-webkit box sizing: border- box;
- 點(diǎn)擊高亮我們需要清除清除設(shè)置為transparent完成透明：
-webkit tap-highlight color: transparent;
- 在移動(dòng)端瀏覽器默認(rèn)的外觀在ios.上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式：
-webkit-appearance: none;
img,a { -webkit-touch-callout: none; }
移動(dòng)端技術(shù)選型 ----------------------（可綜合選擇混合使用）
單獨(dú)制怍移動(dòng)端頁面(主流)
- 流式布局（百分比布局)
- flex彈性布局(強(qiáng)烈推薦)
- less+ rem+媒體查詢布局
- 混合布局
響應(yīng)式頁面兼容移動(dòng)端(其次)
- 媒體查詢
- bootstrap
flex流式布局
流式布局，就是百分比布局，也稱非固定像素布局。通過
將盒子的寬度設(shè)置成百分比，從而根據(jù)屏幕的寬度來進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
是移動(dòng)web開發(fā)使用的比較常見的布局方式。
注：制作過程中，需要給參考元素設(shè)置最大和最小支持寬度。
max-width最大寬度(max-height最大高度)
min-width最小寬度(min-height 最小高度)
特殊樣式 （直接復(fù)制即可）
/*CSS3盒子模型*/box-sizing: border-box;-webkit- box-sizing: border- box;/*點(diǎn)擊高亮我們需要清除清除設(shè)置為transparent完成透明*/*{-webkit tap-highlight-color: transparent;}/*在移動(dòng)端瀏覽器默認(rèn)的外觀在iOS.上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式*/input{-webkit-appearance: none;}/*禁用長按頁面時(shí)的彈出菜單*/img,a { -webkit- touch-callout: none;}垂直方向?qū)Rvertical-align: middle偽元素為行內(nèi)元素 必須添加content屬性
方向負(fù)數(shù)表示同方向移動(dòng)，正數(shù)表示反方向移動(dòng)
二倍精靈圖做法 -----------------------------在firework里 左下角寬高處 把精靈圖等比例縮放為原來的一半，之后根據(jù)新的大小測量坐標(biāo)
注意代碼里面background-size也要寫:精靈圖原來寬度的一半
線形漸變背景background- image: linear- gradient屬性
linear-gradient() 函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。
圖片格式 ------------------------------------DPG圖片壓縮技術(shù)
京東自主研發(fā)推出DPG圖片壓縮技術(shù)，經(jīng)測試該技術(shù)，可直接節(jié)省用戶近50%的瀏覽流量，極大的提升了用戶的網(wǎng)頁打開速度。能夠兼容jpeg,實(shí)現(xiàn)全平臺、全部瀏覽器的兼容支持，經(jīng)測試后發(fā)現(xiàn)，壓縮后的圖片和webp的清晰度對比沒有差距。
webp圖片格式
谷歌開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器寬帶資源和數(shù)據(jù)空間。
flex布局
flex布局原理
flex是flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為flex布局。
當(dāng)父盒子設(shè)為flex布局以后，子元素的float、clear和 vertical-align屬性將失效。
（伸縮布局）（彈性布局）（伸縮盒布局）（彈性盒布局）（flex布局）
傳統(tǒng)布局與flex布局- 兼容性好
- 布局繁瑣
- 局限性，不能再移動(dòng)端很好的布局
- 操作方便，布局極為簡單，移動(dòng)端應(yīng)用很廣泛
- PC端瀏覽器支持情況較差
- IE 11或更低版本，不支持或僅部分支持
flex布局原理：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
先確定主軸是誰，側(cè)軸是誰。再看側(cè)軸方向有幾行。單行找align-items，多行找align-content
flex布局父項(xiàng)常見屬性以下由6個(gè)屬性是對父元素設(shè)置的
- flex- direction 設(shè)置主軸的方向
主軸與側(cè)軸
分為主軸和側(cè)軸兩個(gè)方向，同樣的叫法有:行和列、x軸和y軸
默認(rèn)主軸方向就是x軸方向，水平向右
默認(rèn)側(cè)軸方向就是y軸方向，垂直向下
flex- direction 屬性決定主軸方向，即項(xiàng)目的排列方式。注意：主軸和側(cè)軸是會變化的，子元素是跟著主軸排列的
| 屬性值 | 說明 |
|---|
| row | 默認(rèn)從左到右 |
| row-reverse | 從右到左 |
| column | 從上到下 |
| column-reverse | 從下到上 |
- justify- content 設(shè)置主軸上的子元素排列對齊方式
注意：使用屬性之前先確定主軸
| 屬性值 | 說明 |
|---|
| flex-start | 默認(rèn)值 從頭開始，如果主軸是x，則從左到右 |
| flex-end | 從尾部開始排列 |
| center | 在主軸居中對齊（如果主軸是x軸，則水平居中） |
| space-around | 平分剩余空間 |
| space-between | 先兩邊貼邊，再平分剩余空間（※） |
- flex-wrap 設(shè)置子元素是否換行
- align-content 設(shè)置側(cè)軸上的子元素的排列方式(多行)
設(shè)置子項(xiàng)在側(cè)軸上的排列方式，并且只能用于子項(xiàng)出現(xiàn)換行的情況（多行），在單行下沒有效果
| 屬性值 | 說明 |
|---|
| flex-start | 在側(cè)軸的頭部開始排列 |
| flex-end | 在側(cè)軸的尾部開始排列 |
| center | 在側(cè)軸中間顯示 |
| space-around | 子項(xiàng)在側(cè)軸中平分剩余空間 |
| space-between | 子項(xiàng)在側(cè)軸中先分布在兩頭，再平分剩余空間 |
| stretch | 設(shè)置子項(xiàng)元素高度平分父元素高度 |
- align-items 設(shè)置側(cè)軸上的子元素排列方式(單行)
在子項(xiàng)為單行時(shí)使用
| 屬性值 | 說明 |
|---|
| flex-start | 從上到下 |
| flex-end | 從下到上 |
| center | 擠在一起居中 |
| stretch | 拉伸 |
justify-content： center；和 align-items： center；兩條元素實(shí)現(xiàn)子元素在父元素中居中效果
align-items： stretch；在元素未設(shè)置高度時(shí)生效
- flex-flow 復(fù)合屬性，相當(dāng)于同時(shí)設(shè)置了flex- direction和flex-wrap
flex-flow： row mowrap；
flex布局子項(xiàng)常見屬性定義子項(xiàng)目分配父盒子的
剩余空間，用flex來表示占多少份數(shù)。屬性值為數(shù)字，數(shù)字為1，表示占總份數(shù)的一份。默認(rèn)值為0
- align-self 控制子項(xiàng)目在側(cè)軸排列方式
align-self 屬性 允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
- order屬性定義子項(xiàng)的排列方式（前后順序）
數(shù)值越小，排列越靠前，默認(rèn)為0. 注意：和z-index不一樣。如果想前面元素往后拉，數(shù)值要比前面都大。如果想往前提，屬性值可以為負(fù)。
rem單位
rem是相對單位，類似于em（父元素字體大?。煌氖莚em的基準(zhǔn)是相對于html元素的字體大小。優(yōu)勢：父元素文字大小可能不一致，但整個(gè)頁面只有一個(gè)html，可以很好的控制頁面的元素大小比例。
媒體查詢
使用@media查詢，可以針對不通過的媒體類型定義不同的樣式?？梢葬槍Σ煌钠聊怀叽缭O(shè)置不同的樣式。當(dāng)重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度高度重新渲染頁面
語法規(guī)范：@media開頭，
@media mediatype and|not|only (media feature) {}關(guān)鍵字 and not only or
- and 可以將多個(gè)媒體特性連接在一起，相當(dāng)于“且”
- not 排除某個(gè)媒體類型，相當(dāng)于“非”，可以省略
- or 可以測試多個(gè)媒體查詢條件，只要有一個(gè)成立就執(zhí)行，相當(dāng)于“或”
- only 指定某個(gè)特定的媒體類型，可以省略
媒體特性每種媒體類型都具有各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不通過的展示風(fēng)格。
| 值 | 解釋說明 |
|---|
| width | 定義輸出設(shè)備中頁面可見區(qū)域的寬度 |
| min-width | 定義輸出設(shè)備中頁面最小可見區(qū)域的寬度 |
| max-width | 定義輸出設(shè)備中頁面最大可見區(qū)域的寬度 |
實(shí)際案例中：- 按照從大到小或者從小到大思路。最好從小到大來寫，這樣代碼更簡潔
- 注意：有最大值max-width和最小值min-width都是包含等于的
- 當(dāng)屏幕小于540像素（x<=539）
- 當(dāng)屏幕大于540像素并且小于等于969像素的時(shí)候(540<=x<=639)
- 當(dāng)屏幕大于970像素時(shí)，(x>=970)
媒體查詢＋rem實(shí)現(xiàn)元素動(dòng)態(tài)大小變化- rem單位是跟著html來走的，有了rem頁面元素可以設(shè)置不同大小尺寸
- 媒體查詢可以根據(jù)不同設(shè)備寬度來修改樣式
- 媒體查詢＋rem實(shí)現(xiàn)不同設(shè)備寬度，實(shí)現(xiàn)元素動(dòng)態(tài)大小變化
媒體查詢引入資源方法<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystyylesheet.css">less
CSs的弊端
- CSS是一個(gè)非程序式語言，沒有變量、函數(shù)、SCOPE (作用域)等概念
- CSS需要書寫大量看似沒有邏輯的代碼，CSS冗余度是比較高的。
- 不方便維護(hù)及擴(kuò)展，不利于復(fù)用。
- CSS沒有很好的計(jì)算能力
- 非前端開發(fā)工程師來講，往往會因?yàn)槿鄙貱SS編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的CSS代碼項(xiàng)目。
Less介紹Less (Leaner Style Sheets的縮寫)是一門CSS擴(kuò)展語言，也成為CSS預(yù)處理器。
- 做為CSS的一種形式的擴(kuò)展，它并沒有減少CSS的功能，而是在現(xiàn)有的CSS語法上，為CSS加入程序式語言的特性。
- 它在CSS的語法基礎(chǔ)之上，引入了變量，Mixin (混入) 1運(yùn)算以及函數(shù)等功能，大大簡化了CSS的編寫，并且降低了CSS的維護(hù)成本，就像它的名稱所說的那樣，Less 可以讓我們用更少的代碼做更多的事情。
- 常見的CSS預(yù)處理器: Sass、 Less、 Stylus
- Less 是一門CSS處理語言，它擴(kuò)展了CSS 的動(dòng)態(tài)特性。
Less變量變量是指沒有固定的值，可以動(dòng)態(tài)改變的。因?yàn)槲覀僀SS中的一-些顏色和數(shù)值等經(jīng)常使用。
@變量名:值;
- 必須有@為前綴
- 不能包含特殊字符
- 不能以數(shù)字開頭
大小寫敏感
@color: pink;//直接使用
body {color: @color;}a:hover {color: @color;}Less編譯需要把.less文件，編譯生成為.css文件，這樣html頁面才能使用。
Less嵌套寫法
header { .logo { width: 300px; }}如果遇見交集、偽類、偽元素選擇器，標(biāo)簽前書寫&符號
內(nèi)層選擇器的前面沒有&符號，則它被解析為父選擇器的后代；如果有&符號，它就被解析為父元素自身或父元素的偽類。
a { &: hover{ color:red; }}Less運(yùn)算任何數(shù)字、顏色或者變量都可以參與運(yùn)算。Less 提供了加(+)、減(-)、乘(*)、除(/)【除法外層需要添加括號width: (200rem | 50px);】算術(shù)運(yùn)算。
注意事項(xiàng)：- 參與運(yùn)算的兩個(gè)數(shù)字，可以一個(gè)有單位一個(gè)沒有單位，最終單位就是唯一單位。
- 如果兩個(gè)數(shù)字都有單位，取前一個(gè)數(shù)字的單位。
- less運(yùn)算符左右必須加空格
rem適配
讓一些不能等比自適應(yīng)的元素，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候，等比例適配當(dāng)前設(shè)備。
使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小，然后頁面元素使用rem做尺寸單位，當(dāng)html字體大小變化，元素尺寸也會發(fā)生變化，從而達(dá)到等比縮放的適配。
rem實(shí)際開發(fā)適配方案- 按照設(shè)計(jì)稿與設(shè)備寬度的比例，動(dòng)態(tài)計(jì)算并設(shè)置html根標(biāo)簽的font-size大小; (媒體查詢)
- CSS 中，設(shè)計(jì)稿元素的寬、高、相對位置等取值，按照同等比例換算為rem為單位的值
技術(shù)方案1
less、媒體查詢、rem
設(shè)計(jì)稿常見尺寸：（基本以750px為主）
技術(shù)方案2 (推薦)
flexible.js、rem
兩者都存在，2比1更簡單
元素大小取值方法- 最后的公式:頁面元素的rem值 =頁面元素值(px) / (屏幕寬度 /劃分的份數(shù))
- 屏幕寬度/劃分的份數(shù)就是html font-size的大小
- 或者:頁面元素的rem值=頁面元素值(px) / html font-size字體大小
Flexible. js不需要在寫不同屏幕的媒體查詢,因?yàn)槔锩孀隽颂幚?br>
原理:把當(dāng)前設(shè)備劃分為10等份,不同設(shè)備下,比例還是一致
我們要確定當(dāng)前設(shè)備的html文字大小
githubtttl: https: //github. com/amfe/lib-flexible
cssrem插件 vs code px轉(zhuǎn)換rem
文件—擴(kuò)展項(xiàng)—設(shè)置 設(shè)置html字體大小基準(zhǔn)值
移動(dòng)端技術(shù)選型
單獨(dú)制作移動(dòng)端頁面（主流）
- 流式布局（百分比布局）
- flex彈性布局
- less＋rem＋媒體查詢布局
- 混合布局
響應(yīng)式頁面兼容移動(dòng)端（其次）
響應(yīng)式開發(fā)
原理使用媒體查詢針對不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置,從而適配不同設(shè)備的目的。
響應(yīng)式布局容器響應(yīng)式需要一個(gè)父級做為布局容器,來配合子級元素來實(shí)現(xiàn)變化效果
原理就是在不同屏幕下,通過媒體查詢來改變這個(gè)布局容器的大小,再改變里面子元素的排列方式和大小,從而實(shí)現(xiàn)不同屏幕下,看到不同的頁面布局和樣式變化
響應(yīng)式尺寸劃分
超小屏幕(手機(jī),小于768px):設(shè)置寬度為100%
小屏幕(平板,大于等于768px):設(shè)置寬度為750px
中等屏幕(桌面顯示器,大于等于992px):寬度設(shè)置為970px
大屏幕(大桌面顯示器,大于等于1200px):寬度設(shè)置為1170px
也可以根據(jù)實(shí)際情況自定義劃分
Bootstrap
Bootstrap來自 Twitter(推特),是目前最受歡迎的前端框架。 Bootstrap是基于hml、Css和 JAVASCRIPT的,它簡潔靈活,使得Web開發(fā)更加快捷
●中文官網(wǎng) : http: //
http://www.bootcss.com/●官網(wǎng) : http: //getbootstrap. com/
框架:顧名思義就是一套架構(gòu),它有一套比較完整的網(wǎng)頁功能解決方案,而且控制權(quán)在框架本身有預(yù)制樣式庫、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)
關(guān)鍵詞：訓(xùn)練,學(xué)習(xí),筆記,教育
在線咨詢
