我的前端自學之路2020 12 30移動端

2021-10-13 10:28:46 字數 2280 閱讀 3010

移動web開發

目前國內的移動端瀏覽器基本是根據webkit修改來的核心,所以相容移動端的主流瀏覽器,處理webkit核心即可。

常見移動端螢幕尺寸以及dpr

視口viewport

就是瀏覽器顯示頁面內容的螢幕區域,視口可以分為布局視口、視覺視口和理想視口。

理想視口:idea viewport

為了使**在移動端有最理想的瀏覽和閱讀寬度而設定,需要手動填寫meta視口標籤來通知瀏覽器操作,mata視口標籤的主要目的:布局視口的寬度應該與理想視口的寬度一致,簡單理解就是裝置有多寬,我們布局的視口就有多寬。

meta視口標籤

name

="viewport"

content

="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

>

width=device-width 寬度為裝置寬度

user-scalable=no 禁止使用者縮放

initial-scale=1.0 初始比例為1倍(無縮放)

maximum-scale=1.0最大縮放比例1倍

minimum-scale=1.0最小縮放比例1倍

物理畫素和物理畫素比

物理畫素點指的是螢幕尺寸的最小顆粒,是物理真實存在的,簡單來說就是螢幕的解析度,如800x600,就是指螢幕高、寬各自最多能放600和800個物理畫素點。

在pc端,1px=1物理畫素點,但是在移動端就不盡相同的。1px能顯示的物理畫素點的個數,稱為物理畫素比(dpr)。

多倍圖

移動端常用特殊樣式移動端常見布局

1 .流式(百分比) 通過設定盒子的寬度為百分比來根據螢幕的寬度進行伸縮,不受固定畫素的限制,內容向兩側填充。

2 .flex布局 flexible box,彈性布局,用來為盒裝模型提供最大的靈活性,任何乙個容器都可以指定為flex布局。

當父元素指定為flex布局後,子元素的float、clear、vertical-align屬性將失效。

父項常見屬性:

flex-direction:row/colum;設定主軸為橫向(x)或者縱向(y),預設主軸為x軸

row-reverse橫向反轉排列

colum-reverse豎向反轉排列

justify-content:設定主軸上子元素的排列方式

flex-start 預設值,從頭部開始,順序排列

flex-end 從尾部開始,反向排列

center 在主軸上居中排列

space-around 評分剩餘空間

space-between 先兩邊貼邊,再平分剩餘空間

flex-wrap:wrap/nowrap;設定主軸上子元素是否換行,預設為不換

align-content:設定側軸上子元素的排列方式(多行)

一定要先換行

space-around 專案在側軸平分剩餘空間

space-between 專案在側軸先分布在兩端 再平分剩餘空間

align-items:設定側軸上子元素排列方式(單行)

flex-start 預設值,從上到下

flex-end 從下到上

center 垂直居中

stretch 拉伸(專案不要給高度)

flex-flow:row wrap;復合屬性,相當於同時設定了flex-direction和flex-wrap

子項常見屬性:

flex:1;子項所占有的份數

align-self:控制子項自己在側軸的排列方式,允許單個專案和其他專案有不一樣的對其方式,可覆蓋align-items屬性,預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch

order:定義子項的前後順序

我的前端學習之路

轉眼間就到大三的暑假了,開始我現在的實習 耽擱許久的部落格也終於開始動手寫了,目前暑假實習於厚溥公司 這個部落格主要是記錄我在實習期間學習的過程和一些總結。html的定義 html又稱為超文字標記語言,它不是一種程式語言,而是一種指令碼語言 html的基本結構 html分為兩類 一類是具有開始標籤和...

我的孤獨自學之路 Google Hacker

1.高階語法intitle 包含標題 intext 包含內容 filetype 檔案型別 info 基本資訊 site 指定 inurl 包含某個url link 包含指定鏈結的網頁 cache 顯示頁面的快取版本 numberange 搜尋乙個數字2.常用萬用字元 同義詞 前面必須要有乙個空格 模...

我的前端入職之路

經常在網上看到有人問,學前端是自學好還是報培訓好?有招前端實習生?沒有經驗的前端怎麼辦?我就來講一講我的前端入職路吧。我認為,興趣是最好的老師。有錢報班自然好,沒錢報班也能自學成才,沒有經驗就自己創造經驗。我大學專業本是通訊技術,在校學的不過是皮毛。更多的也是理論上的數字通訊和移動通訊,光纖電纜等知...