一缆蝉、學(xué)習(xí)使我快樂(lè)

筆記來(lái)自拉勾教育大前端，說(shuō)真的，對(duì)于培訓(xùn)機(jī)構(gòu)我起初報(bào)有的信心不是很大刊头，包括以前也報(bào)過(guò)黍瞧，但是都因?yàn)楦鞣N原因半途而費(fèi)了，偶然的機(jī)會(huì)接觸到拉勾教育原杂，從開(kāi)始的期待一直到現(xiàn)在第一模塊結(jié)束印颤，才感覺(jué)自己是真的學(xué)到了東西。既然可以通過(guò)努力去改變自己穿肄，那有什么不努力的原因呢年局，加油吧，打工人咸产！

• 打好基礎(chǔ)真的很重要矢否，html、css脑溢、javascript三大件僵朗，必須完全掌握，不懂就直接查MDN
• HTML重點(diǎn)掌握語(yǔ)義化屑彻。區(qū)塊分級(jí)和內(nèi)聯(lián)標(biāo)簽衣迷，了解定義在head里面的meta
• css重點(diǎn)看盒模型。定位酱酬。層級(jí)壶谒。過(guò)渡，動(dòng)畫(huà)和transform膳沽。知道原理和規(guī)則
• 熟練應(yīng)用以上所學(xué)的知識(shí)點(diǎn)汗菜，搭建自己想要的頁(yè)面，包括一些重點(diǎn)和難點(diǎn),less和flex之類(lèi)的也要熟練掌握挑社。

二陨界、移動(dòng)端開(kāi)發(fā)基礎(chǔ)

移動(dòng)端調(diào)試方法

• 搭建本地web服務(wù)器，手機(jī)和服務(wù)器一個(gè)局域網(wǎng)痛阻，通過(guò)手機(jī)訪(fǎng)問(wèn)服務(wù)器
• 使用外網(wǎng)服務(wù)器菌瘪，直接ip或域名訪(fǎng)問(wèn)
• 移動(dòng)端瀏覽器我們主要對(duì)webkit內(nèi)核進(jìn)行兼容

視口

• 就是瀏覽器顯示頁(yè)面的屏幕區(qū)域，視口可以分為布局視口阱当、視覺(jué)視口和理想視口

布局視口

• 默認(rèn)設(shè)置俏扩，pc上網(wǎng)頁(yè)可以在手機(jī)上呈現(xiàn)，但是會(huì)縮小元素弊添，默認(rèn)手動(dòng)縮放網(wǎng)頁(yè)

視覺(jué)視口

• 用戶(hù)正在看到網(wǎng)站的區(qū)域录淡，通過(guò)縮放去操作視覺(jué)視口，但不影響布局

理想視口（推薦）

• 為了使網(wǎng)站有理想的瀏覽和閱讀寬度而設(shè)定的油坝，簡(jiǎn)單理解布局的視口等于設(shè)備的寬度

width: 寬度設(shè)置的是viewport嫉戚，可以設(shè)置device-width特殊值
initial-scale: 初始縮放比刨裆，大于0的數(shù)字
maximum-scale: 最大縮放比，大于0的數(shù)字
minimum-scale：最小縮放比彬檀，大于0的數(shù)字
user-scalable：用戶(hù)是否可以縮放
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

物理像素&物理像素比

• 物理像素指屏幕顯示的最小顆粒
• 一個(gè)px能顯示的物理像素點(diǎn)的個(gè)數(shù)帆啃，稱(chēng)為物理像素比或者屏幕像素比

特殊樣式

css3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-box;
/* 點(diǎn)擊高亮我們需要清除樣式 */
*{
  -webkit-tap-highlight-color: transparent;
}
/* 在移動(dòng)端瀏覽器默認(rèn)的外觀(guān)在ios加上這個(gè)屬性才能給按鈕和輸入框自定義樣式 */
input{
  -webit-appearance: none;
}
/* 禁用長(zhǎng)按頁(yè)面時(shí)彈出菜單 */
img,a{
  -webit-touch-callout:none;
}

移動(dòng)端技術(shù)選型

1. 單獨(dú)制作移動(dòng)端頁(yè)面（主流）

• 流式布局（百分比布局）
• flex 彈性布局（強(qiáng)烈推薦）
• less+rem+媒體查詢(xún)布局
• 混合布局

2. 響應(yīng)式頁(yè)面兼容移動(dòng)端

• 媒體查詢(xún)
• bootstrap

3. 國(guó)內(nèi)的手機(jī)瀏覽器都是根據(jù)webkit修改過(guò)來(lái)的內(nèi)褲，國(guó)內(nèi)尚無(wú)自主研發(fā)的內(nèi)核窍帝，就像手機(jī)操作系統(tǒng)都是基于Android修改開(kāi)發(fā)一樣的

移動(dòng)端技術(shù)解決方案

• 瀏覽器以webkit內(nèi)核為主链瓦，私有前綴添加-webkit-
• css初始化normalize.css。優(yōu)點(diǎn)：保護(hù)了有價(jià)值的默認(rèn)值盯桦，修復(fù)了瀏覽器bug，模塊化和擁有詳細(xì)的文檔

流式布局也稱(chēng)百分比布局

• 百分比布局渤刃，通過(guò)將盒子設(shè)置成百分比拥峦，根據(jù)屏幕寬度來(lái)進(jìn)行伸縮，不受固定像素限制
• 移動(dòng)web開(kāi)發(fā)中比較常見(jiàn)的布局方式
• 設(shè)置視口標(biāo)簽以及引入初始化樣式

  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/index.css">
  

常用初始化樣式

body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 540px;
  background: #fff;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serif;
  line-height: 1.5;
  color: #666;
}

css漸變效果

background-image: linear-gradient(0deg,#f1503b,#c82519 50%);

圖片格式DPG

• 京東自主研發(fā)的圖片壓縮技術(shù)卖子，提高用戶(hù)打開(kāi)網(wǎng)頁(yè)速度略号，能夠兼容jpeg，并且清晰度沒(méi)有差距

響應(yīng)式布局容器

• 需要一個(gè)父級(jí)做為布局容器洋闽，實(shí)現(xiàn)變化效果
• 在不同屏幕下玄柠，通過(guò)媒體查詢(xún)改變布局容器大小，改變頁(yè)面布局和樣式變化

  .box{
      height: 100px;
      margin: 0 auto;
    }
    /* 超小屏幕 */
    @media screen and (max-width: 767px){
      .box{
        width: 100%;
        background-color: blue;
      }
    }
    /* 小屏幕 */
    @media screen and (min-width: 768px){
      .box{
        width: 750px;
        background-color: blueviolet;
      }
    }
    /* 中等屏幕 */
    @media screen and (min-width: 992px){
      .box{
        width: 970px;
        background-color:chartreuse;
      }
    }
    /* 小屏幕 */
    @media screen and (min-width: 1200px){
      .box{
        width: 1170px;
        background-color:crimson;
      }
    }
  

移動(dòng)端規(guī)范布局

• 先引入理想視口和css樣式表
• 引入規(guī)范css樣式表normalize.css

  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/index.css">
  

• 格式化css樣式

/* 初始化樣式 */
body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
ul,li {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  color: #222;
  text-decoration: none;
}
h1,h2,h3,h4,h5,h5 {
  margin: 0;
  padding: 0;
}
/*點(diǎn)擊高亮我們需要清除清除 設(shè)置為transparent 完成透明*/
*{
  -webkit-tap-highlight-color: transparent;
}
/*在移動(dòng)端瀏覽器默認(rèn)的外觀(guān)在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式*/
input{
  -webkit-appearance: none;
}
/*禁用長(zhǎng)按頁(yè)面時(shí)的彈出菜單*/
img,a { -webkit-touch-callout: none; }

flex布局

• flex彈性布局诫舅，用來(lái)為盒狀模型提供最大靈活性羽利，任何一個(gè)容器都可以指定為flex布局
• 當(dāng)我們?yōu)楦负凶釉O(shè)置flex布局后，子元素的float刊懈、clear和vertical-align屬性將失效
• 通過(guò)給父盒子添加flex屬性这弧，來(lái)控制子盒子的位置和排列方式

flex布局父項(xiàng)常見(jiàn)屬性

flex-direction 設(shè)置主軸方向

• 主軸和側(cè)軸是會(huì)變化的，就看flex-direction設(shè)置誰(shuí)為主軸虚汛，而子元素就是跟主軸排列的

justify-content 主軸上元素排列方式

• 定義了主軸上對(duì)齊方式匾浪，但是要先確定主軸

flex-wrap 設(shè)置子元素是否換行

• flex布局中默認(rèn)不換行的

align-items 側(cè)軸上子元素排列方式（單行）

• 控制子項(xiàng)在側(cè)軸上排列方式蛋辈，在子項(xiàng)為單行的時(shí)候使用

align-content 側(cè)軸上子元素排列方式(多行)

• 設(shè)置子項(xiàng)在側(cè)軸上排列方式，只能用于子項(xiàng)換行的情況将谊，在單行下是沒(méi)有效果的

flex-flow

• flex-flow是flex-direction和flex-wrap屬性的復(fù)合屬性
• flex-flow: row norwrap;

flex 布局子項(xiàng)常見(jiàn)屬性

• flex子項(xiàng)目占的份數(shù)
• align-self控制子項(xiàng)自己在側(cè)軸的排列方式
• order屬性定義子項(xiàng)的排列順序

flex屬性

• flex屬性定義子項(xiàng)目分配父盒子的剩余空間，用flex來(lái)表示占有多少份
• 屬性值為數(shù)字尊浓，數(shù)字為1挂洛，表示占總份數(shù)中的1份，默認(rèn)為0

align-self 控制子項(xiàng)自己在側(cè)軸上的排列方式

• align-self屬性允許單個(gè)項(xiàng)目有不同的對(duì)齊方式眠砾，可覆蓋align-items
• 默認(rèn)值為auto虏劲，表示繼承父元素的align-items屬性托酸，如果沒(méi)有父元素等同于stretch

order排序

• 數(shù)值越小，排列越靠前柒巫，默認(rèn)為

rem布局

• rem是一個(gè)相對(duì)單位励堡，類(lèi)似em,em是父元素字體大小
• 不同的是rem基準(zhǔn)是相對(duì)于html元素字體大小
• 父元素文字大小可能不一致，但是整個(gè)頁(yè)面只有一個(gè)<html>可以很好的控制整個(gè)頁(yè)面的元素大小比例

媒體查詢(xún)

• 使用@media查詢(xún)堡掏，可以爭(zhēng)對(duì)不同媒體類(lèi)型定義不同樣式
• @media會(huì)根據(jù)不同高度和寬度重新渲染頁(yè)面

  @media mediatype and|not|onle (media feature) {
 CSS-Code 
}

mediatype

• all:用于所有設(shè)備
  -print:用于打印機(jī)和打印預(yù)覽
  -screen:用于電腦屏幕应结，平板電腦，智能手機(jī)

關(guān)鍵字

• and:將多個(gè)媒體連接到一起泉唁，相當(dāng)于且的意思
• not:排除某個(gè)媒體類(lèi)型鹅龄，相當(dāng)于非的意思
• or:可以測(cè)試多個(gè)媒體查詢(xún)條件，只有一個(gè)成立就執(zhí)行
• only：指定某個(gè)特點(diǎn)的媒體類(lèi)型

媒體查詢(xún)+rem實(shí)現(xiàn)元素動(dòng)態(tài)大小變化

• rem 單位是跟著html走的可以根據(jù)不同設(shè)備寬度來(lái)修改樣式
• 媒體查詢(xún)+rem 就可以實(shí)現(xiàn)不同設(shè)備寬度亭畜，實(shí)現(xiàn)頁(yè)面元素大小的動(dòng)態(tài)變化

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

Less

• Less是一門(mén)css預(yù)處理語(yǔ)言扮休，拓展了css的動(dòng)態(tài)特性

Less安裝

• 用node.js安裝Less
• cmd命令"npm install -g -less"安裝，檢查安裝成功lessc -v

Less編譯

• 我們需要把less文件編譯成css文件拴鸵，這樣我們html才能使用
• 推薦方法node.js: 在當(dāng)前文件夾玷坠，使用cmd命令"lessc style.less > style.css"
• 利用vscode less插件，easy LESS插件用來(lái)把less文件編譯成css文件

簡(jiǎn)介高效的rem適配方案flexible.js

• github地址：https://github.com/amfe/lib-flexible
• 在index.html中引入flexible.js這個(gè)文件<script src="js/flexible.js"></script>

vscode px 轉(zhuǎn)換rem插件 :cssrem