css - Desktop is class List and Mobile is class Grid

admin管理员组

文章数量:1430627

<input type="radio" class="list" checked> <!-- checked, desktop -->
<input type="radio" class="grid"> <!-- checked, mobile -->

Here class list is desktop and mobile. I know it is css media screen. How can I change the mobile is class grid and desktop is class list? Now it is only list on the first, both desktop and mobile.

<input type="radio" class="list" checked> <!-- checked, desktop -->
<input type="radio" class="grid"> <!-- checked, mobile -->

Here class list is desktop and mobile. I know it is css media screen. How can I change the mobile is class grid and desktop is class list? Now it is only list on the first, both desktop and mobile.

• css
• media
• mobile
• input
• radio

Share Improve this question asked May 27, 2019 at 17:29 DaniDani 2144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

If we suppose that you have mobile version with max resolution to 980px you can use media query with max width 980 for mobile. In this media query you stop list item to be displayed. On the other side on desktop where media have min resolution 981px, you will set the grid to not displayed.

<style>
@media screen and (max-width: 980px){
.list { display: none; }
} 
@media screen and (min-width: 981px){
.grid{ display: none; }
}
</style>

本文标签： cssDesktop is class List and Mobile is class Grid