问一个rem的问题 是不是如果要写radio=18.75 就这样改?

问一个rem的问题 是不是如果要写radio=18.75 就这样改?

之前老师说18.75 好计算一些,是不是如果要用18.75 就改这两个地方就可以了, 因为这个视频老师里面用的radio是10  而基准rem是37.5 修改后就是下面这样对吗

http://img1.sycdn.imooc.com//climg/5f505c42090d038710640444.jpg

http://img1.sycdn.imooc.com//climg/5f505c5a09b4f35513500929.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕久久 2020-09-03 17:45:37

同学你好,dpr之所以能够解决border问题,一方面的原因就在于它影响了视口的宽度,比如dpr为1时,视口宽为375,dpr为2时,视口宽为750:

http://img1.sycdn.imooc.com//climg/5f50bafd09e17e7114730435.jpg

http://img1.sycdn.imooc.com//climg/5f50bb0209e9479a19080637.jpg

由于视口宽度会变化,所以html的fontsize也会变,从第一张图中可以看出,dpr为1时,html的fontsize是20px,所以vscode要对应设置成20;从第二张图可以看出,dpr为2时,html的fontsize是40px,所以vscode要设置成40px;但是注意的是,dpr等于3时,html的fontsize并不是60px,因为dpr为3的设备,本身宽度就比较大,如下(设备不再是iphone6):

http://img1.sycdn.imooc.com//climg/5f50bb1609f5cace18600371.jpg

由于设计稿对应的都是iphone6,所以dpr为3的情况,可以不用考虑,只看iphone6设备就行(只考虑dpr为1和为2的情况,dpr为3的情况,我们的代码可以自动处理)。

同学只需记住一点,即:vscode的值,要与html元素最终的fontsize大小保持一致,同学可以通过预览页面,查看html最终的fontsize大小。

建议同学将之前的适配课程再听一遍,可以2倍速,巩固一下之前的知识,然后哪里不懂,可以在对应的位置提问,也可以看一下别人的笔记,强化一下自己的知识。

祝学习愉快!

好帮手慕久久 2020-09-03 15:03:02

同学你好,是的,如果要求适配时,要考虑dpr,那么就要使用之前讲过的通用适配方案,此时html的fontsize是40px,如下:

http://img1.sycdn.imooc.com//climg/5f5094d809b4c68106010190.jpg

因此要对应给vscode设置成40px。

祝学习愉快!

  • 提问者 陈立天 #1
    这个dpr如果是1就是在vscode写成20 如果dpr2 就是40 dpr3就是60? 我想在又点懵,这个dpr 和font-size的基准值有什么联系? 我记得这个dpr是影响了这个border而已。
    2020-09-03 16:08:33
好帮手慕久久 2020-09-03 14:35:50

同学你好,如果你想将我们这个项目中的系数改成18.75,那么下面这张图改的是对的:

http://img1.sycdn.imooc.com//climg/5f508e2f096ac92407310136.jpg

但是vscode的系数不对,我们这个项目中,使用的通用适配方案,即没有考虑dpr,所以系数改成18.75后,html的fontsize是20px,如下:

http://img1.sycdn.imooc.com//climg/5f508e76094888b310560201.jpg

所以vscode要对应设置成20:

http://img1.sycdn.imooc.com//climg/5f508e8f09f7c7c106990276.jpg

如果同学想要使用ratio是10,即和视频中老师的方式一样,要如下设置:

http://img1.sycdn.imooc.com//climg/5f508f5c096524fc05620125.jpg

http://img1.sycdn.imooc.com//climg/5f508f7c09fc341005050208.jpg

祝学习愉快!

  • 提问者 陈立天 #1
    也就是正常还要写上考虑dpr的代码的话vscode要对应设置成 直接就写40就行了?
    2020-09-03 14:52:41
好帮手慕久久 2020-09-03 13:54:58

同学你好,是要对应改这两个位置,具体如下:

之前使用18.75,对应js代码中如下位置:

http://img1.sycdn.imooc.com//climg/5f508505097178b011490427.jpg

即对应当前项目中的如下位置:

http://img1.sycdn.imooc.com//climg/5f5085050969b22d08280304.jpg

所以如果想修改ratio,就对应修改上图中红框中的位置即可;修改完ratio后,要对应修改vscode编辑器中的系数:

http://img1.sycdn.imooc.com//climg/5f50850809f8f5ab05540541.jpg

此时,同学可以把页面打开,看一下html的fontsize是多少,比如我们这个项目中,ratio是10,html的fontsize是37.5px,所以上图编辑器中位置,要对应设置成37.5,即编辑器的设置值要与页面的html标签的fontsize大小保持一致。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

  • 提问者 陈立天 #1
    所以我是改对了没? 我没整明白
    2020-09-03 14:22:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师