如何根据屏幕尺寸加载不同的css文件媒体查询|下一篇.JS

问题描述 投票：0回答：1

我想根据用户的屏幕尺寸加载不同的CSS文件，一种用于移动设备，一种用于平板电脑，一种用于台式机，有时一种用于宽屏。我想这样做的原因是为了优化速度并最大限度地减少每个屏幕尺寸中未使用的 CSS。我创建 CSS 文件的方式如下：
\> 所有核心样式（考虑颜色、边框大小、悬停效果、活动效果、填充、字体大小等）都将放入手机 CSS 中（最小宽度：0px）
\> 将更改为平板电脑屏幕的所有内容（考虑容器高度、弯曲方向、网格模板列等）都将放入平板电脑 CSS（最小宽度：600px）
\> 任何将更改为桌面的内容都将放入其自己的文件中（最小宽度：1024px），宽屏也会发生同样的情况（最小宽度：1280px）

我之前在之前的项目中已经使用 元素并指定屏幕尺寸来完成此操作。

我想对 Next.JS 做同样的事情，我为每个屏幕尺寸加载所需的 css 文件，但我不知道该怎么做。手动在页面顶部写入并将 与所需的媒体查询放在一起感觉是错误的，因为我觉得 Next.JS 有一种更好、更推荐的方法

css reactjs next.js web-applications frontend
1个回答
0
投票

你可以通过多种方式做到这一点，如果你想使用 css，那么在你的组件或页面文件夹中，你可以有一个“styles.css”或“anyName.css”，并像任何 css 一样编写你的样式。之后，您所要做的就是在您想要使用它的组件内部

import styles.css
！

或者，如果您想保留一个动态文件并将其添加到页面中的每个标题中，您也可以这样做！以下是一些示例，如果您想要不同的方式，请告诉我，我会更新它。

示例1，动态头

next/head 组件可根据屏幕尺寸动态地将标签插入到页面中

import React from 'react';

const DynamicCSS = () => {
  return (
    <>
      <link
        rel="stylesheet"
        href="/path/to/mobile.css"
        media="(min-width: 0px)"
      />
      <link
        rel="stylesheet"
        href="/path/to/tablet.css"
        media="(min-width: 600px)"
      />
      <link
        rel="stylesheet"
        href="/path/to/desktop.css"
        media="(min-width: 1024px)"
      />
      <link
        rel="stylesheet"
        href="/path/to/widescreen.css"
        media="(min-width: 1280px)"
      />
    </>
  );
};

export default DynamicCSS;

用途：

import Head from 'next/head';
import DynamicCSS from './DynamicCSS';

const Layout = ({ children }) => {
  return (
    <>
      <Head>
        <DynamicCSS />
      </Head>
      <div>{children}</div>
    </>
  );
};

export default Layout;

布局的用法：

import Layout from '../components/Layout';

const Home = () => {
  return (
    <Layout>
      <h1>Hello, world!</h1>
    </Layout>
  );
};

export default Home;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.