移动端开发1-用响应式设计不是主流，主流是专门为移动端开发一套UI+界面-附视频-案例-作业

目前的主流：不是响应式设计开发移动端网站，而是专为移动端设计和开发一套页面+代码

前面学习的响应式设计是不是现在移动端开发的主流呢？响应式设计有没有缺点？

响应式设计的目的就是一套HTML结构，使用媒体查询使用多套CSS文件，造成的结果就是移动端的HTML结构和数据也用的是PC端的，所以在做复杂页面时，因为页面过于庞大，如果不重新设计一套HTML结构以符合移动端显示，就会严重影响性能，而且CSS也会变得非常复杂。

在构建大型应用时都会根据移动端设计尺寸再设计一套页面，重新开发而不是共用PC端代码和设计。

也就是把响应式设计从PC+平板+手机三合一，改为PC一套，平板+手机为一套

所以实际场景中，响应式设计可以用在中小型项目或网站中。

目前的主流：不是响应式设计开发移动端网站，而是专为移动端设计和开发一套页面+代码。

PC端 VS 移动端的开发难度？

移动端其实容易些，因为页面要简单些，布局也没那么多那么杂。

设计师一般只会根据主流机型设计一套UI界面，工作即结束。那么所有的适配屏幕的工作都会交给前端来处理
手机端屏幕尺寸各异，如何像UI那样，只需要写一套移动端代码就能适配所有的屏幕，并能保证一致的用户体验？
要找到一种方式：等比例适配。

比如设计师针对的是iPhone13 mini做的一套设计（750px）,前端拿到UI设计搞后，也可以根据iPhone13 mini的屏幕做前端开发，然后在根据不同的屏幕做等比例缩放即可。

rem? rem是一个相对单位。就像%。r指的是root,即HTML元素。

rem针对HTML元素的font-size 进行的一个等价转换。

公式：1rem等HTML元素的font-size的值。

比如html的font-size:16, 此时1rem=16px

比如HTML的font-size:30px,此时1rem=30px;

如果font-size:50px,1rem=50px;

即rem就是跟HTML的font-size挂钩的。

添加px-转rem公式代码

(function(){
  var w=window.innerWidth;
  var bili=w/3.75;              document.documentElement.style.fontSize=bili+"px";
})();

根据设计师的设计稿来定比例
比如设计师的设计搞是750px,那么将上面的3.75，即
```
var bili=w/3.75;改为
var bili=w/7.5;
//假设设计稿是640px,
var bili=w/6.4;//100px
```
根据设计稿来量尺寸，设计稿量出来的尺寸是多少，就转写成对应的rem
比如：设计稿量出的一个div的尺寸是：60x40px
在写css代码时，就直接写0.6remx0.4rem
开发时的模拟器也调为跟设计一样大小的模拟器
切换到其他模拟器去看看比例是否保持一致即可。

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号