如何在浏览器 ReactJS 中更改桌面视图、平板电脑视图、移动视图答案

【问题标题】：How to Desktop View, Tablet View ,Mobile view change inside a browser ReactJS如何在浏览器 ReactJS 中更改桌面视图、平板电脑视图、移动视图
【发布时间】：2021-08-30 12:23:39
【问题描述】：

我是 Reactjs 的新手。如何在浏览器中添加 3 个视图，通过自动更改视图。
Reference Page Link

【问题讨论】：

标签： reactjs react-hooks media-queries breakpoints

【解决方案1】：

您可以使用 div 包装所有内容并控制该 div 的宽度。

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

function App() {
    const [state, setState] = useState('desktop');

    return (
        <div className="App">
            <button onClick={() => setState('desktop')}>Desktop</button>
            <button onClick={() => setState('tablet')}>Tablet</button>
            <button onClick={() => setState('phone')}>Phone</button>
            <div className={`container ${state}`}>Your content here</div>
        </div>
    );
}

export default App;

/*App.css*/
.App {
    height: 100%;
    background-image: -webkit-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);
}

/* General styling */
button {
    padding: 0.5rem;
    margin: 1rem;
    border-radius: 10px;
    cursor: pointer;
    border: none;
}

.container {
    /* General styling */
    background-color: whitesmoke;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    transition: all 1s;

    /* Center the container */
    margin-left: auto;
    margin-right: auto;
}

.desktop {
    width: 90%;
}

.tablet {
    width: 768px;
}

.phone {
    width: 480px;
}

/* index.css */
/* To make full width and height */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#root {
    height: 100%;
}

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【解决方案2】：

以上答案是正确的。您可以简单地将主容器的宽度设置为 100%，然后将其他容器与其他元素一起放置在其中，也可以使用 @mediaqueries("https://www.w3schools.com/css/css_rwd_mediaqueries.asp") 指定宽度。这样，您可以控制主容器内的元素。我可以肯定地说，您需要自己尝试一下，看看一切如何运作，使用 devtools（有工具工具栏）。

【讨论】：