react根据浏览器的尺寸动态调整布局

迈不过友情╰ 2024-01-21 06:15 74阅读 0赞

### react根据浏览器的尺寸动态调整div ###

#### react实现关键代码 ####

// 设置状态
    state = {
        deskDivWidth：800px;
        deskHeight: document.body.clientHeight,
    }
    
    
    componentDidMount() {
    
    // 注册浏览器尺寸变化监听事件， 刷新桌面尺寸
    window.addEventListener('resize', this.handleSize);
    
    }
    
    componentWillUnmount() {
        // 移除监听事件
        window.removeEventListener('resize', this.handleSize);
    }
    
    // 自适应浏览器的高度
    handleSize = () => {
        this.setState({
            deskHeight:document.body.clientHeight,
        });
    }
    
    
    render() {
    
        const { deskDivWidth,deskHeight } = this.state;
            return (
                <Fragment>
                    <div className={styles.deskDiv}
                         style={
       {width: deskDivWidth, height: deskHeight, backgroundColor:'#41b887' }}>
                         
                         这个div高度可以自适应哦--刘云生
    
                    </div>
    
    
                </Fragment>
            );
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android应用适配问题：尺寸判断和布局调整

在Android开发中，适配不同尺寸的设备是一个常见的挑战。以下是一些常用的方法和技巧来处理尺寸判断和布局调整： ###1. 使用尺寸限定符（Size Qualifiers）

朴灿烈づ我的快乐病毒、/ 2024年11月06日 21:27/ 0 赞/ 20 阅读

相关 el-table根据浏览器动态设置高度

Vue+Element-UI根据浏览器大小动态设置el-table的高度. 效果 ![在这里插入图片描述][3d5692413d4841b7a5bf3ac70c5589

深藏阁楼爱情的钟/ 2024年03月30日 12:57/ 0 赞/ 70 阅读

相关 react根据浏览器的尺寸动态调整布局

react根据浏览器的尺寸动态调整div react实现关键代码 // 设置状态 state = { deskDivWidth：80

迈不过友情╰/ 2024年01月21日 06:15/ 0 赞/ 75 阅读

相关小程序开发（5）-列表页根据数据动态调整样式

前面4篇文章，我们从零开始，做了一个列表跳转详情页的小程序。下面我们将花一些时间，把这个demo完善一下。目前完善的思路主要包括一下内容： 1. 格式化数据以及样式

浅浅的花香味﹌/ 2023年07月18日 02:38/ 0 赞/ 27 阅读

相关快速调整照片尺寸

推荐使用2345看图王，推荐找去广告版尺寸分调大和调小调小看图王打开之后，保存JPEG的时候有个滑块直接拖动，可以直接看到调整后的大小调大先将JPEG转换成

àì夳堔傛蜴生んèń/ 2022年08月29日 05:50/ 0 赞/ 189 阅读

相关 IOS UIView自动调整尺寸

自动尺寸调整行为当您改变视图的边框矩形时，其内嵌子视图的位置和尺寸往往也需要改变，以适应原始视图的新尺寸。如果视图的autoresizesSubviews属性声明被设置为Y

迷南。/ 2022年08月24日 06:08/ 0 赞/ 232 阅读

相关调整合适的画布尺寸（游戏）

1、处理尺寸调整 <!DOCTYPE html> <html> <head> <meta charset

Love The Way You Lie/ 2022年08月21日 12:59/ 0 赞/ 190 阅读

相关 OpenCV尺寸调整

include<cv.h> include<highgui.h> int main(int argc, char argv) {

比眉伴天荒/ 2022年07月24日 12:29/ 0 赞/ 219 阅读

相关前端如何获取浏览器窗口的尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的

矫情吗；*/ 2022年05月19日 07:40/ 0 赞/ 228 阅读

相关 react 菜单结构调整

第一步修改/role/list 里的数据 ![20181110144639608.png][] "menus": \["/admin/home", "/admin/u

淩亂°似流年/ 2022年04月17日 00:29/ 0 赞/ 224 阅读