web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
生活随笔
收集整理的這篇文章主要介紹了
web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://www.bilibili.com/video/BV14J4114768?p=390
代碼：https://gitee.com/xiaoqiang001/html_css_material
文章目錄
- 瀏覽器現狀
- 手機屏幕現狀
- 常見移動端屏幕尺寸
- 移動端調試方法
- 視口 viewport（布局視口 layout viewport 視覺視口 visual viewport 理想視口 ideal viewport）
- meta 視口標簽
- 二倍圖/多倍圖（物理像素&物理像素比）
- 背景縮放 background-size （cover覆蓋、contain鋪滿【寬度或高度】）
- 背景圖片二倍圖（原理跟上面二倍圖一樣）
- cutterman快速切二倍圖、三倍圖
- 移動端開發主流方案
- 移動端技術解決方案
- 移動端瀏覽器
- 移動端css樣式初始化 normalize.css
- css3盒子模型（box-sizing: border-box;）傳統盒子模型（box-sizing: content-box;）
- 移動端特殊樣式（去除元素背景變藍高亮效果 -webkit-tap-highlight-color: transparent;）（去除按鈕外觀效果 -webkit-appearance: none;）（禁用圖片或鏈接長按時彈出菜單 -webkit-touch-callout: none;）
- 移動端常見布局
- 移動端技術選型
- 流式布局
- 案例：京東移動端首頁
- 二倍精靈圖做法
- DPG格式圖片與webp格式圖片
瀏覽器現狀
手機屏幕現狀
常見移動端屏幕尺寸
移動端調試方法
視口 viewport（布局視口 layout viewport 視覺視口 visual viewport 理想視口 ideal viewport）
meta 視口標簽
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body>黑馬程序員 </body></html>未加視口標簽和加視口標簽后：
二倍圖/多倍圖（物理像素&物理像素比）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}div {width: 300px;height: 300px;background-color: pink;}/* 1. 物理像素 就是我們說的分辨率 iPhone8的物理像素是 750 *//* 2. 在 iPhone8里面 1px 開發像素 = 2個物理像素 */</style> </head><body><div></div> </body></html>
就是準備一張比實際大兩倍的圖，在html里手動縮放到一半，然后到手機上手機又自動放大兩倍，能保證清晰度
背景縮放 background-size （cover覆蓋、contain鋪滿【寬度或高度】）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 500px;height: 500px;border: 2px solid red;background: url(蜥蜴女仆.gif) no-repeat;/* background-size: 圖片的寬度 圖片的高度; *//* background-size: 500px 200px; *//* 1.只寫一個參數 肯定是寬度 高度省略了 會等比例縮放 *//* background-size: 500px; *//* 2. 里面的單位可以跟% 相對于父盒子來說的 *//* background-size: 50%; *//* 3. cover 等比例拉伸 要完全覆蓋div盒子 可能有部分背景圖片顯示不全 *//* background-size: cover; *//* 4. contain 高度和寬度等比例拉伸 當寬度 或者高度 鋪滿div盒子就不再進行拉伸了 可能有部分空白區域 */background-size: contain;}</style> </head><body><div></div><p></p> </body></html>背景圖片二倍圖（原理跟上面二倍圖一樣）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 1. 我們有一個 50 * 50的盒子需要一個背景圖片，但是根據分析這個圖片還是要準備2倍， 100*100 *//* 2. 我們需要把這個圖片縮放一半，也就是 50*50 background-size*/div {width: 50px;height: 50px;border: 1px solid red;background: url(images/apple100.jpg) no-repeat;background-size: 50px 50px;}</style> </head><body><div></div> </body></html>cutterman快速切二倍圖、三倍圖
移動端開發主流方案
移動端技術解決方案
移動端瀏覽器
移動端css樣式初始化 normalize.css
http://necolas.github.io/normalize.css/
css3盒子模型（box-sizing: border-box;）傳統盒子模型（box-sizing: content-box;）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div:nth-child(1) {/* 傳統盒子模型= width + border + padding */width: 200px;height: 200px;background-color: pink;padding: 10px;border: 10px solid red;box-sizing: content-box;}div:nth-child(2) {/* 有了這句話就讓盒子變成CSS3盒子模型 *//* padding 和 border 不會再撐大盒子了 */box-sizing: border-box;width: 200px;height: 200px;background-color: purple;padding: 10px;border: 10px solid blue;}</style> </head><body><div></div><div></div> </body></html>移動端特殊樣式（去除元素背景變藍高亮效果 -webkit-tap-highlight-color: transparent;）（去除按鈕外觀效果 -webkit-appearance: none;）（禁用圖片或鏈接長按時彈出菜單 -webkit-touch-callout: none;）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a {-webkit-tap-highlight-color: transparent;}input {-webkit-appearance: none;}</style> </head><body><a href="#">黑馬</a><input type="button" value="按鈕"> </body></html>移動端常見布局
移動端技術選型
流式布局
案例：京東移動端首頁
二倍精靈圖做法
DPG格式圖片與webp格式圖片
https://www.bilibili.com/video/BV14J4114768?p=412&spm_id_from=pageDriver
總結
以上是生活随笔為你收集整理的web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flask img标签图片中src链接添
- 下一篇： 如何解决海康网盘下载大文件中断问题？（i