xxw1028的gravatar头像
xxw1028 2014-12-22 22:44:42

基于sass、grunt实现移动端屏幕自适应字体

grunt:这是个前端打包工具,当然不仅仅是打包同时帮助前端开启临时的http服务,当然是要gulp也是一样的

sass:实现样式的自动生成,毕竟是适应不同的屏幕大小,还是需要自动化的,不认手工会很烦的

实现原理:

使用sass生成多个屏幕媒体样式,然后通过设置字体的rem来实现屏幕字体的切换(当然这里也是用sass实现px到rem的转换的)

下面是实现插图:

第一张:这个是用scss文件,主要就是使用sass实现媒体文件生成和px到rem的转换,webstorm有支持

基于sass、grunt实现移动端屏幕自适应字体

第二张图:grunt启动项目以及文件监听:

基于sass、grunt实现移动端屏幕自适应字体第三张图片:浏览器效果

基于sass、grunt实现移动端屏幕自适应字体第4张图:不同尺寸字体样式不一样

基于sass、grunt实现移动端屏幕自适应字体

sorry:

   太晚了,要赶地铁,未能详细描述,忘见谅,可以qq我,大家相互沟通!


打赏

文件名:demo.zip,文件大小:148.267K 下载
  • /
      • /demo
          • /demo/dev
              • /demo/dev/css
                  • /demo/dev/css/common
                    • /demo/dev/css/common/mobile-reset.css
                • /demo/dev/css/demo.css
                • /demo/dev/css/demo.css.map
              • /demo/dev/html
                • /demo/dev/html/index.html
                • /demo/dev/html/wap.html
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友