码迷,mamicode.com
首页 > 移动开发 > 详细

react中利用sass配置来做移动端适配(vw/vh)

时间:2020-05-18 16:43:14      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:资源   嵌套规则   grunt   javascrip   客户端   nbsp   ESS   app   列表   

首先来看一下sass和less的区别

sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理,引入less.js就可以处理,sass是基于ruby所以在服务器处理。

sass优点:

用户多,更容易找到会用scss的开发,更容易找到scss的学习资源;

可编程能力比较强,支持函数,列表,对象,判断,循环等;相比less有更多的功能。

less优点

可以在浏览器中运行,实现主题定制功能;

接下来就利用sass的变量和函数来做移动端适配
首先先用脚手架创建react项目
npx create-react-app new-app
cd new-app
npm start

接下来运行npm run eject讲webpack配置弹射出来(这一步其实可以先不弹射,为了方便 在这弹射,注意注意注意??  弹射不可逆),并安装sass

cnpm install node-sass sass-loader --save

将index.css和App.css改为index.scss和App.scss ,目录如下

技术图片

 

 

 index.js和App.js引入地址改为引入./scss

这个时候页面没有任何的变化,一切正常(那我们弹射项目有什么用呢?不要着急,我们接着往下走)

接下来我们做移动端适配(这的方案是vw/vh)

我们在index.scss里面加上一下代码(切记标点符号,否则会报错)

技术图片

 

 这个时候我们在App.scss文件里面来书写移动端测量出来的代码(我们在这用px和vw作区分)

技术图片

 

这个时候我们看页面的变化

技术图片

 

 我们发现vw并没有生效,为什么呢 (因为在index.scss中的函数这个时候并不是全局的而是局部的,也就是说 函数在index.scss中是可以用的,但在别的文件中是不能用的)

这个时候就要在webpack中做一些配置(前面的弹射用到了吧   哈哈)

我们安装一个npm包

cnpm install sass-resources-loader --save

在config文件夹下面webpack.config.js文件里面加上一下代码

加代码之前如下

技术图片

 加代码之后

技术图片

 

 这个时候我们在重启项目(每当改配置文件之后就需要重启项目)在看页面

技术图片

 

 

 这个时候宽度已经是vw因为我们是750的设计稿 dpr为2  比例就是2  当我们设计稿的宽度为100px时 我们在代码中就要写成vw(200) 

这样就做到了利用sass的函数和变量vw/vh来做到移动端适配

react中利用sass配置来做移动端适配(vw/vh)

标签:资源   嵌套规则   grunt   javascrip   客户端   nbsp   ESS   app   列表   

原文地址:https://www.cnblogs.com/houjl/p/12910859.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!