200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html前端 rem布局 完美兼容各手机端的尺寸 自适应布局

html前端 rem布局 完美兼容各手机端的尺寸 自适应布局

时间:2022-11-11 02:03:05

相关推荐

html前端 rem布局 完美兼容各手机端的尺寸 自适应布局

1. 先下载一个淘宝的js(/mtb/lib-flexible/0.3.4/??flexible_css.js)

用法说明:

我这里用的scss,当然没用这些样式预处理器也没关系,下面会让你怎么做,因此需定义转换函数

$w: 75; //psd 设计图尺寸除以10@function rem($n) {@return ($n/$w) + rem;}

$w 说明:

1.该为设计图页面总宽度尺寸除以10

3. 接着用法:

.main{

width: rem(700); //某个main类的宽度在设计图是700px。

font-size: rem(28); //我这里为了偷懒,直接用rem去写。但值得注意的是

//所有关于字体的行高line-height, font-size 都需要在设计图原有的尺寸+4.

//譬如 字体在设计图是24px,而用rem去转换时,需要 24+4也就是 rem(28)

//为何+4?因为放手机大小,具体+多少,自己来定,但是+4是最合理,因为和设计图的字像素一毛一样

}

4. 完蛋,我是新手,没用scss,sass等预处理器怎么办??

给个建议,先去学下scss语法,非常简单,类似搬砖工作。

接着点击这个网址 /

如果这个网址打不开,自己搜下翻译工具吧

把scss代码粘贴这个网站左边框,右边就会编译成css的代码咯

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。