css模块化以及rem布局

1.css模块化

我们在用React开发项目的时候，我们给标签添加样式的方式有多种。这里我们主要说内联样式和样式表，以及模块样式。

1.内联样式

我们可以直接在标签内直接添加style属性

javascript 复制代码

import React, {useState} from 'react';
import './App.css';

const App = () => {
    return (
        <div>
            <p style={{textAlign:'center',fontSize:'8px'}}>我是一个段落</p>
            <button style={{backgroundColor:'red',border:'none'}}>点我一下</button>
        </div>
    );
};

export default App;

但是这样如果样式多的话很难去维护，看起来也会很不友好，不宜用理解。

2.样式表

我们就可以

每个组件单独创建css文件，然后

javascript 复制代码

import React, {useState} from 'react';
import './App.css';

const App = () => {

    const [redBorder, setRedBorder] = useState(true);

    // const pStyle = {
    //     color: 'red',
    //     backgroundColor: '#bfa',
    //     border: redBorder ? "red solid 1px" : "blue solid 1px"
    // };

    const clickHandler = () => {
        setRedBorder(false);
    };

    return (
        <div>
            <p className={p1 ${redBorder?'':'blueBorder'}}>我是一个段落</p>
            <button onClick={clickHandler}>点我一下</button>
        </div>
    );
};

export default App;
[图片]

引入就可以直接使用了，但是这种引入的话会导致类名全部暴露在全局中。会出现一些问题。

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
);

如果类名重复，那么就会出现冲突，后面引入的就会覆盖到前面的，这样类名就需要非常谨慎，但是开发往往很多人一起开发的。所有容易出现这些问题，我们就需要用样式模块化。

3.模块化css

我们只需要在创建css文件加上module就可以模块化css了。react会自动识别模块css。

javascript 复制代码

import React from 'react';
import classes from "./A.module.css";

const A = () => {
    return (
        <div>
            <p className={classes.p1}>我是A组件</p>
        </div>
    );
};

export default A;

引入的时候就需要和组件引入一样了。需要起一个名字classes这个随便，然后相当于把模块css作为对象引入，然后classes.p1就可以使用了。

javascript 复制代码

import React, {useState} from 'react';
import classes from './App.module.css';
import A from "./A";

const App = () => {

    /*
    *   CSS模块
    *       使用步骤：
    *           1.创建一个xxx.module.css
    *           2.在组件中引入css
    *               import classes from './App.module.css';
    *           3.通过classes来设置类
    *               className={classes.p1}
    *       CSS模块可以动态的设置唯一的class值
    *           App_p1__9v2n6
    * */

    const [showBorder, setShowBorder] = useState(false);

    const clickHandler = () => {
        setShowBorder(true);
    };


    return (
        <div>
            <A/>
            <p className={${classes.p1} ${showBorder ? classes.Border : ''}}>我是一个段落</p>
            <button onClick={clickHandler}>点我一下</button>
        </div>
    );
};

export default App;

这里虽然类名一样，但是css模块对动态添加唯一的class值，比如App.module.css就是有App作为前缀而且后面会随机跟一些hash值，这样很好的避免样式冲突问题。

2.rem布局

我们在用电脑端去开发移动端项目的时候，手机根据型号牌子导致宽度不同，那么我们就无法用单纯的px去指定文字或者图片大小，因为会写死，我们想要我们的htmlcss的宽度高度根据当前页面宽度去动态的调整，这时候就需要用rem这个相对数值了。

javascript 复制代码

html {
    font-size: 26vw;
}

/*
    当前屏幕最大为372px
    100vw = 375px
   我们希望100vw就是 a = 100px
   我们分成26.666667分每一份就是100px
   如果是414px
   分成26.66667个每一份就会大于100px
*/
/* rem是根据html */
.p1 {
    /* font-size: 16px; /
    font-size: 0.16rem;
*    /* 那么现在1rem就是100px也就是可以等比例放大了 /
*    /* 换成414px就会等比例大一点 */
    te
}

/* 我们的px单位是绝对数值，我们直接定义字体大小是16px无论什么设备都会是16px */
/* rem是相对单位,相对于根元素的fontsize大小比如这里我们设置16px,那么子元素的1rem就是16px 2rem就是32px*/
/* 但是想要rem可以实现等比例放大那么html就需要动态的计算fontsize值 */
/* 我们可以使用vw这个单位 vw也是一个相对单位，这里我们100vw相当于把屏幕分成100份 */

当我们用16px指定文字大小，不管我们如何改变视口，都会是16px。因为是绝对数值，rem是相对数值，会根据根元素的fontsize大小比如这里我们设置16px，也就是html的fontsize是16px，那么我们子元素设置1rem就是16px。但是我们的根元素写死了..........rem也就是死的。所有我们需要把这两个都动态的进行设置数值。

我们根元素需要用vw这个相对单位。比如我们这样写了26vw，那么不管当前视口宽度是多岁，都会被分为100份，那么1rem转化为px对应的就是这100份乘以26，我们最理想的情况就是让1rem=100px，也就是1rem就是26份（一共是100份），这样就不用考虑视口的宽度了，反正我们永远按照这个比例去设置。这也就是rem布局去兼容移动端的原理。