Как записать RWD css для всех устройств? - PullRequest
Новая
       102

Как записать RWD css для всех устройств?

0 голосов
/ 28 мая 2020

Я разработал 3 различных устройства, надеясь, что каждое устройство может нормально работать независимо от того, вертикальный или горизонтальный экран, левое меню может выбрать масштабирование или сжатие. но теперь я застрял, я обнаружил, что настройка более 2K HD - это катастрофа, без отображения всех выбранных элементов. Как исправить это, чтобы все меню отображались на всех устройствах. Я надеюсь, что шрифт и интервал меню можно автоматически регулировать в процентах в соответствии с различными решениями.

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

отображение на моем устройстве 

/* 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;
}

1 Ответ

0 голосов
/ 29 мая 2020 
@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;
  }
}
...