英文:
I have given position margin-left margin-top tags on my code html css for desktop how can i delete it to my phone to make it responsive?
问题
# 如何根据屏幕尺寸删除一些项目？
我在我的桌面CSS中设置了`margin-left`、`width`、`height`和`position:absolute;`属性，但我希望它们在移动响应时不起作用。
我该如何做到这一点？
英文:
How can i delete some items based on the screen size ?
I have given at my css for desktop margin-left, width, height, and position:absolute; properties but I need them not to apply in mobile responsive.
How can I dot that ?
答案1
得分: 0
你正在寻找的是称为**媒体查询**的东西。
在你的情况下，你只想添加适用于大屏幕的CSS代码，所以它会像这样：
@media (min-width: <你选择的像素大小>px) {
#my-id {
margin-top: Xpx;
...
}
}
英文:
What you're looking for is called a media query
In your case, you just want to add css code that applies for large screens so it would look like:
@media(min-width: <the-size-in-pixels-you-choose>px) {
#my-id {
margin-top: Xpx;
...
}
}
答案2
得分: -3
为了阻止某些CSS属性在移动响应视图中生效，您可以在CSS中使用媒体查询。媒体查询允许您基于屏幕大小或设备特性应用特定的样式。通过在媒体查询中定义样式，您可以控制元素在不同设备上的显示方式。
以下是您可以实现此目的的示例：
假设您有一个名为.my-element的CSS类，具有margin-left，width，height和position: absolute;属性，您希望在移动响应视图中排除它们：
.my-element {
margin-left: 20px;
width: 200px;
height: 100px;
position: absolute;
}
/* 用于移动响应视图的媒体查询 */
@media (max-width: 767px) {
/* 空块 - 此处内部的属性在移动视图中将不会被应用 */
.my-element {
/* 您可以选择重置属性，或者将其保留为空 */
}
}
在此示例中，我们使用了一个媒体查询，将max-width属性设置为767px，这将在屏幕宽度为767像素或更小时（通常对应移动设备）应用媒体查询块内的样式。
在媒体查询块内，我们有.my-element，但它是空的，意味着在移动响应视图中将不会应用任何属性于.my-element。如果您希望，您可以在媒体查询块内将特定属性重置为其默认值。
通过这样做，.my-element类将在桌面视图上应用其原始属性，并且由于媒体查询，在移动视图中将不会应用这些属性。这使您可以为不同的屏幕大小拥有不同的布局和样式。
英文:
To prevent certain CSS properties from applying in mobile responsive views, you can use media queries in your CSS. Media queries allow you to apply specific styles based on the screen size or device characteristics. By defining styles within a media query, you can control how your elements appear on different devices.
Here's an example of how you can achieve this:
Assuming you have a CSS class called .my-element with the properties margin-left, width, height, and position: absolute; that you want to exclude in mobile responsive views:
.my-element {
margin-left: 20px;
width: 200px;
height: 100px;
position: absolute;
}
/* Media query for mobile responsive views */
@media (max-width: 767px) {
/* Empty block - properties inside here will not be applied in mobile views */
.my-element {
/* You can optionally reset the properties or simply leave it empty */
}
}
In this example, we use a media query with the max-width property set to 767px, which will apply the styles inside the media query block when the screen width is 767 pixels or less (typically corresponding to mobile devices).
Inside the media query block, we have .my-element, but it is empty, meaning none of the properties will be applied to .my-element in mobile responsive views. If you want, you can reset specific properties to their default values inside the media query block.
By doing this, the .my-element class will have its original properties applied on desktop views, and they will not be applied on mobile views due to the media query. This allows you to have different layouts and styles for different screen sizes.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论