如何为所有设备编写 RWD css？答案

【问题标题】：How to write a RWD css for all devices?如何为所有设备编写 RWD css？
【发布时间】：2020-09-16 03:54:11
【问题描述】：

我设计了3个不同的设备，希望每个设备都能正常运行，无论屏幕是垂直还是水平，左侧菜单可以选择缩放或缩小。但现在我被卡住了，我发现上面的设置 2K HD 是一场灾难，没有显示所有选择。如何解决此问题以允许所有所有设备都遵循的菜单。我希望菜单的字体和间距可以根据各种解决方案自动按百分比调整。

http://www.ecotw.com.tw/vicky/hl-doc/

display in my device

/* display in laptop */
.hide-phone{display:none}
@media only screen and (max-width:1366px) { 
.hide-phone { display: block; } }

/* display in tablet */
.show-tablet{display:none}
@media only screen and (min-width:1024px) { 
.show-tablet { display: block; } }

/* display in mobile phone */
.show-phone{display:none}
@media only screen and (min-width:980px) { 
.show-phone { display: block; } }

.tablet {display: none;}
@media(max-width:1024px){
    .mobile {
        display: none;
    }
    .tablet {
        display: block;
    }
    .desktop {
        display: none;
    }
}

.mobile {display: none;}
@media(max-width:980px){
    .mobile {
        display: block;
    }
    .tablet {
        display: none;
    }
    .desktop {
        display: none;
    }
}

/*===== topmenu/laptop =====*/
.topmenu {
    margin: 0 auto;
}

.topmenu li a{
	font-size:18px;
	color:#eee;
    padding: 15px;
}

.topmenu li a {
    padding: 15px; }
    @media (min-width: 1400px) {
      .topmenu li a {
        padding: 40px; } }



.topmenu li a:hover {
	font-size:18px;
	color: #fff;
	font-weight:bold;
}

/*===== topmenu/tablet =====*/
.topmenu-tablet {
    margin: 0 auto;
}

.topmenu-tablet li a{
	font-size:12px;
	color:#eee;
    padding: 10px;
}

.topmenu-tablet li a:hover {
	font-size:12px;
	color: #fff;
	font-weight:bold;
}

.topmenu-tablet li a {
    padding: 12px; }
    @media (min-width: 1366px) {
      .topmenu-tablet li a {
        padding: 40px; } }


/*===== topmenu/mobile phone =====*/
.topmenu-mobile{
	margin: 0 auto;}


.topmenu-mobile li a{
	font-size:18px;
	color:#eee;
    padding-right: 6px;
    padding-left: 6px;
}


.topmenu-mobile li a:hover {
	font-size:18px;
	color: #fff;
	font-weight:bold;
}

【问题讨论】：

标签： html css web responsive device

【解决方案1】：

@media screen and (min-width: 1401px) and (max-width: 1599px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 110%;
    padding: 15px;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1919px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 120%;
    padding: 20px;
  }
}
@media screen and (min-width: 1920px)and (max-width: 2387px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 125%;
    padding: 30px;
  }
}

@media screen and (min-width: 2388px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 130%;
    padding: 35px;
  }
}

【讨论】：