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布局去兼容移动端的原理。

相关推荐
Shartin1 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder5 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.13 分钟前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->15 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~17 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo18 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末36 分钟前
React——基础
前端·react.js·前端框架
每天开心41 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端