注意 ：當用H5" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > Part 1 · HTML5-04-移動端網(wǎng)頁開發(fā)

Part 1 · HTML5-04-移動端網(wǎng)頁開發(fā)

時間：2023-09-27 19:18:01 | 來源：網(wǎng)站運營

時間：2023-09-27 19:18:01 來源：網(wǎng)站運營

Part 1 · HTML5-04-移動端網(wǎng)頁開發(fā)：

Part 1 · HTML5 網(wǎng)頁開發(fā)-04

第四章、移動端網(wǎng)頁應用開發(fā)及項目

第一節(jié)、移動端開發(fā)基礎(chǔ)

1、移動web開發(fā)基礎(chǔ)

  1. 常見的PC端瀏覽器（谷歌、360、火狐、搜狗、IE瀏覽器、百度等）
    注意 ：當用H5或CSS3的時候，基本不考慮低版本瀏覽器的兼容性問題了
  2. 常見的移動端瀏覽器（UC瀏覽器、QQ瀏覽器、百度手機瀏覽器、搜狗手機瀏覽器等
    注意 : 國內(nèi)的UC和QQ、百度等手機瀏覽器都是根據(jù)Webkit修改過來的內(nèi)核，國內(nèi)還沒有自主研發(fā)的內(nèi)核
    （移動端訪問網(wǎng)址，網(wǎng)址前加個m，比如：m.jd.com 、m.taobao.com）
    總結(jié)：兼容移動端主流瀏覽器，處理Webkit內(nèi)核瀏覽器就可以了
  3. 常見的移動端屏幕尺寸 ， 可以參考 ：
移動端調(diào)試方法：




2、視口

  1. 布局視口（layput viewport）
  2. 視覺視口（visual viewport）
  3. 理想視口（ideal viewport）對于設(shè)備來說，是最理想的視口尺寸，需要手動添加<meta>標簽
    <meta>視口標簽的主要目的：布局視口寬度應該與理想視口寬度一致，設(shè)備有多寬，布局視口就有多寬
<meta>標簽

屬性解釋
width寬度設(shè)置的是viewport的寬度，可以設(shè)置device-width特殊值
initial-scale初始縮放比，大于0的數(shù)字
maximum-scale最大縮放比，大于0的數(shù)字
minimum-scale最小縮放比,大于0 的數(shù)字
user-scalable用戶是否可以縮放（yes或no,0或1）
寫法：<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0,minimun-scale=1.0,maximun-scale=1.0">標準的viewport參數(shù)設(shè)置




3、物理像素和物理像素比




4、二倍圖




5、移動端開發(fā)的選項




6、移動常見的問題解決方案




box-sizing:border-box;-webkit-box-sizing:border-box;特殊樣式（需要在初始化頁面的時候加進去）

  1. 點擊高亮我們需要清除



*{ -webkit-tap-highlight-color: transparent; }
  1. 移動端瀏覽器默認的外觀在IOS上加上這個屬性才能給按鈕和輸入框自定義樣式



input{ -webkit-appearance: none; }
  1. 禁用長按頁面時的彈出菜單



img,a { -webkit-touch-callout: none; }


7、移動端技術(shù)選型

一、單獨制作移動端頁面（主流）

二、單獨制作移動端頁面（其次）




第二節(jié)、流式布局




1、流式布局原理




2、移動項目初始化準備內(nèi)容

  1. 首先 添加 normalize.css
  2. 其次 添加 index.css
index.css 里面添加特殊樣式部分的內(nèi)容，不用死記硬背，理解原理，復制粘貼




/*點擊高亮我們需要清除清除 設(shè)置為transparent 完成透明*/*{ -webkit-tap-highlight-color: transparent; } /*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/ input{ -webkit-appearance: none; } /*禁用長按頁面時的彈出菜單*/ img,a { -webkit-touch-callout: none; }新增屬性：設(shè)置垂直對齊




vertical-align: middle; 設(shè)置圖片水平居中


7、二倍精靈圖做法




9、線形漸變背景

例：




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


10、滑動輪播圖布局

圖片格式




第三節(jié)、flex布局




1-2、布局體驗布局原理

  1. 兼容性好
  2. 布局繁瑣
  3. 局限性，不能在移動端很好的布局
  1. 操作方便，布局非常簡單，移動端應用廣發(fā)
  2. PC端瀏覽器支持情況差
  3. IE11或更低版本，不支持或者只有部分支持
建議

flex布局原理

flex屬性值：
display：flex;

例如：




div { display: flex; width: 400px; height: 100px; background-color: pink; justify-content: space-around; 設(shè)置主軸方向上子元素的排列方式 } span { width: 100px; height: 50px; background-color: burlywood; margin-right:10px ; flex: 1; 設(shè)置flex子項目占的份數(shù) } <div> <span>1</span> <span>2</span> <span>3</span> </div>


3、 flex-direction 屬性

屬性值解釋說明
row主軸默認值從左到右
row-reverse主軸從右到左
column主軸從上到下
column-reverse主軸從下到上

4、 justify-content 屬性

屬性值解釋說明
flex-start默認值,如果主軸是X軸，則從左到右
felx-end從尾部開始排列
center在主軸居中對齊
space-around平分主軸剩余的空間
space-between先兩邊貼邊，剩下的項目，平分主軸中間剩余的部分（重要）

5、 flex-wrap 屬性

屬性值解釋說明
nowrap默認值，不換行
wrap換行

6、 align-items 屬性

屬性值解釋說明
flex-start默認值，從上到下
flex-end從下到上
center擠在一起居中
stretch拉伸

7、 align-content 屬性

align-content 用來設(shè)置側(cè)軸上子元素的排列方式（多行的時候有效）
注意：只能用于子項出現(xiàn)換行的情況下，單行是沒有效果的

屬性值解釋說明
flex-start在側(cè)軸頭部開始排列
flex-end在側(cè)軸尾部開始排列
center在側(cè)軸中間顯示
space-around子項在側(cè)軸平分剩余的空間
space-between子項在側(cè)軸兩邊貼邊，剩余子項再平分剩余空間
stretch設(shè)置子項元素高度平分父元素高度

8、 flex-flow 復合屬性

9-10、flex布局子項常見屬性

  1. flex屬性
    flex屬性定義子項目分配父盒子的剩余空間，用flex來表示占有多少份
    屬性值為數(shù)字，數(shù)字為1時，表示占總份數(shù)中的1份，默認值是0
    例：
.item{ flex:2; (表示該子項目占有總份數(shù)中的2份)}
  1. align-self屬性
    align-self屬性定義自己的排列對齊方式，針對個體設(shè)置排列方式，層疊前面設(shè)置的樣式
  2. order屬性
    order屬性用來設(shè)置子項的排列先后順序，數(shù)字越小，越靠前排列,默認值是0
    注意：和z-index不一樣，概念不同，不要混淆
    例如：
.item{ order:1; 設(shè)置order為1的子項，排列順序在默認值0的子項的后面}


第四節(jié)、less+rem布局




1-2、rem理解

  1. 流式布局和flex布局只能對寬度進行等比例放大縮小，rem不僅能針對寬度，還能針對高度
rem優(yōu)勢 (參考元素是html,一個頁面只有一個html元素，所以可以實現(xiàn)整體控制)




3、媒體查詢書寫語法

@media 可以針對不同的媒體類型和不同的屏幕尺寸定義不同樣式

書寫規(guī)范：

  1. 用@media開頭，需要加@符號
  2. mediatype媒體類型，mediatype的值（all用于所以設(shè)備、print用于打印機、screen用于電腦屏幕、平板電腦、智能手機等）
  3. 關(guān)鍵字：and、not、only、or
  4. media feature 媒體特性，必須有小括號包含，media feature 媒體類型的值，暫時了解三個（width、min-width、max-width）
例如：




@media mediatype and | not | only (media feature) {CSS-code；}在屏幕設(shè)備中，當屏幕大于或者等于800px的時候，背景色為粉色




@media screen an (min-width:80px) { bady{ background-color:pink; }}


4、媒體查詢案例-背景變色

案例思路: 按照從小到大或者從大到小的思路

注意：為了防止混亂，習慣性按照從小到大來寫，這樣代碼也更簡潔




5、媒體查詢+rem實現(xiàn)元素動態(tài)大小變化

定義html內(nèi)元素的根大小，用媒體查詢，定義寬度來縮放rem單位的元素值




6、媒體查詢引入資源的方法

當設(shè)置的樣式比較繁多的時候，可以直接在link里面判斷媒體類型和媒體特性，然后引入CSS文件
例如：




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


7-8、CSS的弊端和解決方法

為了解決這個問題，引入了less(Leaner Style Sheets)語言

  1. less是一門css的擴展語言，也是css的預處理器
  2. 在css的語法基礎(chǔ)上，引入了變量，運算以及函數(shù)等功能，簡化了css的編寫，降低css的維護成本
總結(jié)：less是一門css的預處理器，擴展了css的動態(tài)功能，可以用更少的代碼做更多的事情

常見的css預處理器：Sass、Less、Stylus




9-12、less的使用

  1. less變量（變量是指沒有固定的值，可以動態(tài)改變的
    寫法：
    @變量名:賦值;
變量命名規(guī)范:

變量使用規(guī)范:
直接使用，例：




body{ color:@color;}2. less 編譯
方法一：用node.js里面的less，使用cmd命令行，把.less文件轉(zhuǎn)換成.css文件，再引用
方法二：vscode里面的easy less插件，寫.less文件，保存后，自動生成.css文件，引用

3. less 編譯嵌套
大結(jié)構(gòu)里面嵌套小結(jié)構(gòu)的寫法，更清晰更美觀
例:




.header{ width:100px; height:100px; .logo{ width:10px; height:10px; }}注意：如果遇見 交集、偽類、偽元素選擇器

4. less 運算




13-14、適配原理+適配方案

原理：

rem實際開發(fā)適配方案

  1. 按照設(shè)計稿與設(shè)備寬度比例，動態(tài)計算并設(shè)置html根標簽的font-size大?。襟w查詢）
  2. css中，設(shè)計稿元素的寬，高，相對位置等取值，按照同比例換算為rem為單位的值



15、蘇寧項目




16、用@import導入less文件

  1. 新建index.html
  2. 將其他.less文件引入到index.less里面
    語法：
    例如將common.less文件導入到index.less文件: @import "common"

24、適配方案2：flexble.js

<script src="js/flexible.js"></script>小技巧 ：如果不用less計算rem，可以用插件直接轉(zhuǎn)換：
Vscode 將px轉(zhuǎn)換成rem，安裝ceerem插件即可




第五節(jié) 響應式布局




1、響應式頁面兼容移動端




2-3、響應式布局容器

平時響應式尺寸的劃分




5、bootstrap

中文官網(wǎng)：


官網(wǎng)：

bootstrap優(yōu)點：




6、bootstrap使用方法

注意：控制權(quán)在框架本身，使用者需要按照框架規(guī)定的某種規(guī)范使用它的樣式庫

bootstrap使用使用四部曲：

  1. 創(chuàng)建文件夾結(jié)構(gòu)
  2. 創(chuàng)建html骨架結(jié)構(gòu)
  3. 引入相關(guān)樣式文件
  4. 書寫內(nèi)容
    書寫內(nèi)容：



7、bootstrap布局容器

bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個.container容器，它提供了兩個作此用的類

1.container類

2.container-fluid類

例如:

<div class="container">111</div> <div class="container-fluid">222</div>


8、bootstrap柵格系統(tǒng)




9、bootstrap柵格系統(tǒng)使用方法

柵格選項參數(shù)
柵格系統(tǒng)用于通過一系列的行（row）和列（column）的組合來創(chuàng)建頁面布局，內(nèi)容直接放進這些創(chuàng)建好的布局中

超小屏幕（手機）<768px小屏設(shè)備（平板）>=750px中等屏幕>=992px寬屏設(shè)備>=1200px
.container最大寬度自動100%750px970px1170px
類前綴.col-xs-.col-sm-.col-md-.col-lg-
列（column）數(shù)12121212
  1. 按照不同的屏幕劃分為1-12等份
  1. 列如果總數(shù)大于12，多余的列所在的元素將被作為一個整體另起一行排列
  2. 可以同時為一列指定多個設(shè)備的類名，以便劃分不同的分數(shù)，例如class="col-md-4 col-sm-6"



10、列嵌套




<div class="col-4 row"> <p class="col-lg-6"> 1 </p> <p class="col-lg-6"> 2 </p> </div>


11、列偏移

使用.col-md-offset- * 類可以將列向右側(cè)偏移，這些類實際是通過使用*選擇器為當前元素增加了左側(cè)的邊距（margin）
例如：row里面的右側(cè)元素 向右偏移4個柵格




<div class="row"> <div class="col-lg-4 ">左側(cè)</div> <div class="col-lg-4 col-lg-offset-4">右側(cè)</div></div>


12、列排序

通過這兩個類可以改變列（column）的順序




12、bootstrap響應式工具

為了加快對移動設(shè)備友好的頁面開發(fā)，利用媒體查詢功能，并且使用這些工具類可以方便針對不同設(shè)備展示或者隱藏頁面內(nèi)容

類名超小屏小屏中屏大屏
.hidden-xs隱藏可見可見可見
.hidden-sm可見隱藏可見可見
.hidden-md可見可見隱藏可見
.hidden-lg可見可見可見隱藏
與之相反的，visible-xs、visible-sm、visible-md、visible-lg 是針對不同設(shè)備顯示某個內(nèi)容

bootstrap其他，參考bootstrap文檔

關(guān)鍵詞：移動

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉