移动端开发

移动端开发

1.1 浏览器的现状

PC端浏览器：谷歌、火狐、IE、360、QQ、百度、搜狗。。。。。
移动端常见浏览器：UC、夸克、QQ、360、猎豹、谷歌、Safari以及其它杂牌浏览器。
总结：移动端主要兼容webkit内核的浏览器即可

1.2 手机屏幕的现状

1. 移动端设备尺寸非常多，碎片化严重 (物理像素)
2. Android设备有多重分辨率：480*800、540*854、540*960、720*1280、1080*1920、2k、4k (逻辑像素)
3. iphone手机近年来也是碎片化严重：640*960、640*1136、750*1334、1242*2208

1.3 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口、理想视口。

1.3.1 布局视口

一般移动设备的浏览器都会默认设置一个布局视口，用于解决早起pc端的页面显示在手机上的问题

ios，android基本上都将这个视口分辨率设置为980px

REM布局

在移动开发中，REM（root em）布局是一种非常流行的响应式设计方法。REM是相对于HTML根元素的字体大小进行计算的单位。使用REM布局，可以确保页面在不同设备和屏幕尺寸上保持一致的比例和可读性。

以下是使用REM布局的基本步骤：

1. 设置根元素字体大小：通常在CSS中将html元素的字体大小设置为一个基准值，比如16px或10px。这取决于你希望在不同设备上的缩放比例。

   html {
       font-size: 16px; /* 或者使用百分比，如 62.5% (等于10px) */
   }
   

2. 使用REM定义其他元素的大小：然后，你可以使用REM单位来定义其他元素的字体大小、宽度、高度等属性。这样，这些元素的大小会根据根元素的字体大小自动调整。

   body {
       font-size: 1rem; /* 等于根元素的字体大小 */
       padding: 1rem; /* 基于根元素字体大小的内边距 */
   }
   
   h1 {
       font-size: 2rem; /* 是根元素字体大小的两倍 */
   }
   

3. 媒体查询：为了适应不同的屏幕尺寸，你可能需要使用媒体查询来动态调整根元素的字体大小。

   @media screen and (min-width: 768px) {
       html {
           font-size: 18px; /* 在平板电脑上增大字体大小 */
       }
   }
   

通过这种方式，你可以创建一个灵活且适应性强的布局，使你的应用或网站在各种设备上都能提供良好的用户体验。但是，需要注意的是，使用REM布局时要考虑到浏览器的默认字体大小和其他可能影响布局的因素。

值	解释说明
all	适用于所有设备
print	用于打印机和打印游览
screen	用于电脑屏幕、智能手机

媒体查询（Media Query）是CSS3新语法。

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

rem+媒体查询具体例子

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

750px 15

1等分 50px

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

总结：

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数就是 htmlfont-size 的大小

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

flexible.js+rem

手机淘宝团队出的简洁高效移动端适配库，我们不需要写不同屏幕的媒体查询，因为里面js做了处理。

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。

我们要做的，就是确定好我们当前设备的html 文字大小就可以了。

比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以。

页面元素rem值： 页面元素的px 值 / 75 ，剩余的让flexible.js来去算

github地址：https://github.com/amfe/lib-flexible

总结：

因为flexible是默认将屏幕分为10等分，但是当屏幕大于750的时候希望不要再去重置html字体了；

所以要自己通过媒体查询设置一下，并且要把权重提到最高。

VSCode px 转换rem 插件 cssrem

因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置