本文是内部的一次分享沉淀, 偏向基础但是涉及了一些有意思的细节, 文笔有限, 才疏学浅, 文中若有不正之处, 万望告知.
前端的一大工作内容就是去兼容页面在不同内核的浏览器, 不同的设备, 不同的分辨率下的行为, 使页面的能正常工作在各种各样的宿主环境当中.
而本文的主题 -- 移动端开发的兼容适配与性能优化, 就是希望能从一些常见的移动端开发问题出发, 厘清 web 移动端开发的前前后后, 一些技术的发展过程, 一些问题的优化手段以及给出一些常见的兼容性问题的解决方案.
什么是响应式设计
首先先聊聊响应式设计, 这个与移动端开发有着密切的联系.
响应式设计即是 RWD,Responsive Web Design.
这里百度或者谷歌一下会有各种各样的答案. 这里一段摘自知乎上我觉得很棒的一个答案: 什么是响应式布局设计?
- // 假设设计稿的宽度是 375px, 假设取设计稿宽度下 1rem = 100px
- $baseFontSize: 100;
- @function px2rem($px) {
- @return $px / $baseFontSize * 1rem;
- }
- // 假设设计稿的宽度是 375px
- @function px2rem($px) {
- @return $px / 375 * 100vw;
- }
- <div class='illustration'>
- <img src='illustration-small.png'
- srcset='images/illustration-small.PNG 1x,
- images/illustration-big.PNG 2x' style='max-width: 500px'/>
- </div>
- <img
- sizes = "(min-width: 600px) 600px, 300px"
- src = "photo.png"
- srcset = "photo@1x.PNG 300w,
- photo@2x.PNG 600w,
- photo@3x.PNG 1200w,
- >
- 300 / 300 = 1
- 600 / 300 = 2
- 1200 / 300 = 4
- 300 / 300 = 1
- 600 / 300 = 2
- 1200 / 300 = 4
- 300 / 600 = .5
- 600 / 600 = 1
- 1200 / 600 = 2
- {
- font-family:
- system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
- Helvetica,Arial,
- sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
- }
- Supported as the -apple-system value (only on macOS and iOS)
- Supported as the BlinkMacSystemFont value (only on macOS)
- {
- font-family:
- system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
- Helvetica,Arial,
- sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
- }
- Using UI System Fonts In Web Design: A Quick Practical Guide
- System Fonts in CSS https://furbo.org/2018/03/28/system-fonts-in-css/
- Apple's San Francisco Font
- .container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .container {
- display: flex;
- }
- .item {
- margin: auto;
- }
来源: https://www.cnblogs.com/coco1s/p/11463599.html