前端移動(dòng)端布局自適應(yīng)
目錄
一、自適應(yīng)布局概念？
二、使用步驟
1. head標(biāo)簽里要寫適用移動(dòng)端
2. 自適應(yīng)單位問題
3. CSS如何寫？
總結(jié)
前言
移動(dòng)端布局需要適應(yīng)不同大小手機(jī)平板屏幕，所以字體圖片等尺寸就要做到隨著屏幕大小的變化去自適應(yīng)，這樣會(huì)給用戶很好的體驗(yàn)感和美感。
一、自適應(yīng)布局概念？
為不同的屏幕分辨率定義不同的布局，即創(chuàng)建多個(gè)靜態(tài)布局，每一個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。屏幕分辨率發(fā)生變化時(shí)，頁面中元素的位置會(huì)變化而大小不會(huì)變。
二、使用步驟
1. head標(biāo)簽里要寫適用移動(dòng)端
代碼如下（示例）：
<!-- viewport 視口操作
? ? ? ? ? ? width=device-width ?寬度是設(shè)備的寬度
? ? ? ? ? ? initial-scale=1.0 ? 允許縮放的比例是1.0
? ? ? ? ? ? user-scalable = no ?不允許用戶縮放頁面
? ? -->
?<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no">
2. 自適應(yīng)單位問題
- 三種單位
??????????px ?固定單位
? ? ? ? ? em ?相對(duì)單位 相對(duì)于父元素的字體大小 1em = 父元素的字體
? ? ? ? ? rem 相對(duì)單位 相對(duì)于根標(biāo)簽的字體大小 1rem = 16px（默認(rèn)）
注：
- 移動(dòng)端使用rem單位，不同大小屏幕尺寸縮小放大，頁面里的不論是文字還是圖片都會(huì)隨著屏幕大小變動(dòng)。（如果寫pc端和移動(dòng)端共用一套代碼，要用rem，框架最常用的是 ? bootstrap ?)
- 使用px書寫h5不能保證圖片文字隨著屏幕大小變化，但是一般寫h5不顧及微小的變化，主要保證布局隨屏幕寬度撐開也可用px。
- ? 寬度使用百分比
- ? 盡量用padding去撐開盒子，不要給固定得寬度和高度（特別是高度）
代碼如下（示例）：
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
該處使用的url網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)。
3. CSS如何寫？
- PC和移動(dòng)共用一套代碼
代碼如下（示例）：
<!-- 引入bootstrap文件 -->
*{
? ? margin: 0;
? ? padding: 0;
? ? font-size: 0px;
? ? box-sizing: border-box;? ? ? ? ? /*把標(biāo)準(zhǔn)盒模型轉(zhuǎn)為ie盒模型，這樣使用padding,margin之后寬度也最大是百分之百*/
}
body {
? ? background: #F7F7F7;
? ? width: 100%;
}
/* 使用媒介查詢*/
@media (min-width: 1200px) {
? ? ? ? ? ? .container,?
? ? ? ? ? ? .container-lg,?
? ? ? ? ? ? .container-md,?
? ? ? ? ? ? .container-sm,
? ? ? ? ? ? .container-xl {
? ? ? ? ? ? ? ? max-width: 1200px;
? ? ? ? }
}- h5頁面
/* 主體 */
.container { max-width: 640px; margin: 0 auto; background: #ececec; position: relative;}- 書寫移動(dòng)端，設(shè)計(jì)稿給出px單位怎么靈活寫成移動(dòng)端自適應(yīng)單位rem
方案一：@media修改動(dòng)態(tài)rem
通過媒體查詢符@media，來修改不同設(shè)備大小下的rem。
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}
這種方式在設(shè)置font-size數(shù)值的時(shí)候，會(huì)以一個(gè)值為基準(zhǔn)，例如100px，然后根據(jù)寬度的比值，去算出不同寬度的font-size，就有了上面這么多的情況。這樣的好處就是不同屏幕大小的手機(jī)屏幕上看到的界面比例都是一樣的。
方案二：
- 在書寫項(xiàng)目前引入flexible.js文件（！書寫項(xiàng)目前引入，否則界面在不同尺寸大小的屏幕上大小會(huì)亂）
- 用rem單位書寫移動(dòng)端項(xiàng)目必須要記得引入flexible.js。（配套使用）
- 在vscode里面安裝插件px to rem 插件（? ? ? ? ? ? ? ? ? ? ? 以下截圖 ? ? ? ? ? ）
、
會(huì)自動(dòng)轉(zhuǎn)換成rem單位，直接敲回車即可。
文章來源：http://www.zghlxwxcb.cn/news/detail-480508.html
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了移動(dòng)端布局注意事項(xiàng)。文章來源地址http://www.zghlxwxcb.cn/news/detail-480508.html
到了這里，關(guān)于前端移動(dòng)端布局自適應(yīng) 及移動(dòng)端和PC端共用一套代碼注意事項(xiàng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
