有没有办法在不使用媒体查询的情况下限制创建的列数,并将其与自动调整/填充相结合？
例如:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
创建精彩,响应迅速的布局.但想象一下,设计最多需要3列 - 即使在广泛的浏览器中也是如此.如果空间允许,它会愉快地显示4,5个更多列.
使用媒体查询,我可以指定大屏幕获取:
grid-template-columns: 1fr 1fr 1fr;
小屏幕得到:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
但这感觉不对.有没有办法告诉我的网格布局重复最多n次,仍然使用重复和自动适合/填充？
更新:这不是重复:如何使用CSS网格和自动填充/拟合限制较大视口中的列数？
我问如何使视口的代码也适用于较小的视口.上面提到的问题(和答案)只是我的问题的起点.
我正在使用js/jq resize事件将css规则应用于水平菜单(可变宽度),当它变得对于屏幕而言太大时.然而,在应用新规则之前,菜单会暂时换行.
理想情况下,我想测量菜单宽度并更改媒体查询的断点!
@media screen and (min-width: THIS-VALUE){
New Rules
}
这可能吗？？
提前致谢.
Chris GW Green
我正在尝试使用CSS变量来生成动态路径。
范例：
:root {
--fonts-path: "/path/to/font";
}
@font-face {
font-family: "FontName";
src: url(var(--fonts-path) + "/FontName-Light.woff") format('woff');
font-weight: 100;
}
html {
font-family: 'Metric', Arial, sans-serif;
}
使用未找到的模块失败'var(--hpe-fonts-path'，这是webpack日志：
ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css
Module not found: Error: Cannot resolve module 'var(--fonts-path' in /Users/project-sample/src/theme
@ ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css 6:83-114 6:234-265 6:403-434 6:576-607
有指针吗？
我正在为自己开发一个新的入门主题。其中，我希望在整个主题中使用许多断点。我不想管理每个媒体查询的断点，而是想将 CSS 变量设置为断点像素值并调用媒体查询内的变量。下面是一个示例（理想情况下）这是如何工作的
:root {
--medium: 1024px;
}
p {
color: black;
}
@media screen and ( min-width: var(--medium) ) {
p {
color: red;
}
}<p>Text I want to be red in screens larger than 1024px.</p>遗憾的是，这个逻辑在常规 CSS/CSS3 中不起作用。有谁熟悉创建一个单点的方法，我可以在不使用预处理器的情况下调整整个主题的媒体查询断点？提前致谢！
在我的 HTML 页面的标题中，我设置了以下 CSS 变量：
:root{
--data-color-primary: #ffcc00;
--data-color-secondary: #4b4b4b;
}
在我的 SASS 文件中，我按如下方式使用它：
DIV.color {
&.color-primary {
background-color: var(--data-color-primary);
}
&.color-secondary {
background-color: var(--data-color-secondary);
}
}
现在我尝试根据背景颜色的亮度设置字体颜色：
@function set-notification-text-color($color) {
@if (lightness($color) > 60) {
@return #000000;
} @else {
@return #ffffff;
}
}
DIV.color{
&.color-primary {
background-color: var(--data-color-primary);
color: set-notification-text-color(var(--data-color-primary));
}
}
但是在我的 SASS 编译器中，我得到以下错误：
错误：参数
$color的lightness($color)必须是一种颜色
如何将 der CSS 变量移交给函数。
我的问题是，CSS 变量由用户（Liferay 7）在我的 CMS 的后端设置，并将呈现在 *.FTL 文件中并打印在 HTML 代码中。
$primary: ${clr_primary};
$secondary: ${clr_primary};
然后我不能在我的 …