Skip to content

Kayakyx/myCssRem

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

单位: rem 相对于html(常用于移动端) vw换算rem

                        如果设计图为640px(iphone 5);
                                 考虑的dpr  2

                                 640px / 2 == 320px;

                                 100vw == 320px;

                                 1vw == 3.2px;

                                 ?vw == 100px;

                                 31.25vw == 100px

                                 如果我们规定(这个是自由的,只要给html设置值就行了) 1rem = 100px; (考虑dpr为2)

                                        1rem                     要求的rem值
                                 -----------------------  =   -------------------
                                        100px                  设计稿测量值 / 2dpr

                                 得出

                                 要求的rem值 = 设计稿测量值 / 2dpr /  100px
                                 所以我们在规定 1rem 为 100px 时, 换算rem时,还得 除以2dpr, 还是比较麻烦。所以我们要想办法,把 除2dpr去掉

                                 注意等号左边是我们自己规定的,所以我们只要可以规定 2rem = 100px

                                         2rem                        要求的rem值
                                  -----------------------   =      ----------------
                                         100px                     设计稿测量值 / 2dpr

                                 这样我们再计算的时候就变成了:

                                 要求的rem值 = 设计稿测量值 / 2dpr * 2rem / 100px
                                 即:
                                 要求的rem值 = 设计稿测量值 / 100px

                                 所以我们可以的得出只要把 1rem 设置成 50px 就可以在转换的时候不用除以 2dpr了。

                                 在刚开始我们以设计稿为640px 算的  31.25vw == 100px  所以  15.625vw == 50px;

                                 所以在rem布局的时候, 我们只要把 html{ font-size: 15.625vw },

                                 这样我们在设计稿中,量出的尺寸直接除以100,就是我们要转换成的rem值了。





                        如果设计图为750px(iphone 6);
                                 考虑的dpr  2
                                 750px / 2 == 375px;

                                 100vw == 375px;

                                 1vw == 3.75px;

                                 ?vw == 100px;

                                 100/3.75≈26.667vw == 100px;

                                  13.333vw == 50px;

                                 根据设计稿为640px的讲解,我们得出 在 1rem 为 50px 时, 要求的rem = 设计稿测量值 / 100 ,原理同上

                                 所以我们,只需要 给  html设置样式为    html{ font-size: 13.333vw } 即可。

About

纯css实现rem布局(vw配合rem)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published