无法将媒体特定样式应用于禁用 Javascript 时出现的错误页面
Posted
技术标签:
【中文标题】无法将媒体特定样式应用于禁用 Javascript 时出现的错误页面【英文标题】：Unable to apply media specific styling to the error page that appears when Javascript is Disabled 【发布时间】：2021-11-17 03:31:38 【问题描述】：我有一个网站，我想在禁用 javascript 时添加一个自定义错误页面。我在 _document.js 中添加了一个组件
<body>
<noscript>
<ErrorPage />
</noscript>
</body>
然后那个页面是这样定义的
function ErrorPage()
const requiredMsg = 'Javascript Required'
const errorText = 'We’re sorry, but the page does not work without JavaScript enabled. Please enable JavaScript on your browser.'
return (
<div style= width: '100%', textAlign: 'center' >
<img style= width: '100%' src= 'img.svg' />
<Typography component='h1' style= fontFamily: 'lato, sans-serif', color: '#1074C3' >requiredMsg</Typography>
</div>
)
export default ErrorPage
看起来不错，但我需要在页面中添加一些特定于媒体的样式和元素。 就像它需要在移动设备上占据整个空间，而在桌面上，它应该只占据中间 200 px 的高度，其余的应该有一个褪色的背景。 这怎么可能？这可以实现吗？
【问题讨论】：
【参考方案1】：我可以通过将样式放在 _document 中来实现这一点
<html>
<noscript>
<style>`
div.errorPage
background-color: rgba(0,0,0,0.3);
/* This is mobile */
@media (max-width:600px)
div.errorPage
background-color: none;
width: 100%;
text-align: center;
height: auto;
`</style>
</noscript>
【讨论】：
以上是关于无法将媒体特定样式应用于禁用 Javascript 时出现的错误页面的主要内容，如果未能解决你的问题，请参考以下文章
javascript 找到应用于特定元素的所有CSS规则;并检查样式表中是否定义了特定元素的CSS属性 - 而不是
在 JavaScript 中更改 HTML 元素的样式并暂时禁用其 CSS 转换无法可靠运行 [重复]