CSS 响应 1080p 及以上
Posted
技术标签:
【中文标题】CSS 响应 1080p 及以上【英文标题】:CSS responsive for 1080p and above 【发布时间】:2020-12-12 09:13:20 【问题描述】:最近我正在考虑创建一个响应式网站,该网站在高分辨率屏幕(如 2k 和 4k 屏幕)上显示效果非常好,我还将使其在桌面和小型设备上响应。
问题: 因为不同的屏幕尺寸会有不同的字体大小、内边距和边距,所以会有很多类似的媒体查询代码,我认为重复类似的媒体查询代码不是一个好主意,所以还有其他好的方法吗?
重复相似代码示例:
@media only screen and (min-width: 900px)
.title
font-size: 1rem;
margin-bottom: 0.2rem;
@media only screen and (min-width: 1200px)
.title
font-size: 1.5rem;
@media only screen and (min-width: 1920px)
.title
font-size: 2rem;
margin-bottom: 0.5rem;
@media only screen and (min-width: 2560px)
.title
font-size: 3rem;
margin-bottom: 1rem;
@media only screen and (min-width: 3840px)
.title
font-size: 3.5rem;
margin-bottom: 1.2rem;
以上方法是唯一的方法还是我可以使用任何其他方法,所以我不需要在每个不同的屏幕尺寸上更改字体大小、填充和边距。
【问题讨论】:
你可以缩小 vw 并使用 calc(不知道这是否是个好主意),或者使用 JS 来减少重复 我个人在我的项目中这样做。这是正常的做法。最重要的是,每个媒体请求都具有技术必要性。 【参考方案1】:经过一些尝试,我创建了一个 sass mixin 来帮助自己进行响应式设计,我不确定这是否 100% 有效,但我认为它可能会有所帮助。
代码:
@function size-number($base-size, $new-size)
@if $new-size != 0
@return $new-size;
@else
@return $base-size;
@mixin break-points-resize ($properties)
$PROPERTIES: $properties;
$BREAKPOINTS: ("1920px","2560px","3840px",);
@for $i from 1 through length($BREAKPOINTS)
@media only screen and (min-width: nth($BREAKPOINTS, $i))
@each $PROPERTY-KEY, $PROPERTY-VALUE in $PROPERTIES
$SIZE-NUMBERS: map-get($PROPERTY-VALUE, "size" );
// [1920px default size => 2], [2560px default size => 3], [3840px default size => 4]
$BASE-SIZES: (size-number(2,nth($SIZE-NUMBERS, 1)),size-number(3,nth($SIZE-NUMBERS, 2)),size-number(4,nth($SIZE-NUMBERS, 3)));
$INDIV-PROPERTY-KEY: $PROPERTY-KEY;
$VALUE-NUMBERS: map-get($PROPERTY-VALUE, "value" );
#$INDIV-PROPERTY-KEY: $VALUE-NUMBERS * nth($BASE-SIZES, $i);
h1
// Specify size, it will use the size that is specified (Three breakpoints, three size)
@include break-points-resize(("font-size":("value": 2rem,"size": (2,3,3.5))));
// Specify 0, it will use the default size (Three breakpoints, three size)
@include break-points-resize(("font-size":("value": 2rem,"size": (0,0,0))));
抱歉代码有点乱
【讨论】:
以上是关于CSS 响应 1080p 及以上的主要内容,如果未能解决你的问题,请参考以下文章
求助:android两个及以上控件点击事件同时监听响应如何实现
为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上有不同的响应?