CSS Navbar content scaling

Привет, меня просто интересовало, каким будет лучший способ масштабирования моего навигатора, чтобы размер ящиков был относительно ширины экрана?CSS Navbar content scaling

Просто стараюсь, чтобы он был немного отзывчивым. Благодаря

Вот CSS:

body { 
 
    background-image: url("background2.jpg"); 
 
} 
 
#navbar ul { 
 
    padding: 5px; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin-left: 5%; 
 
} 
 
#navbar ul li { 
 
    display: inline; 
 
    float: left; 
 
} 
 
#navbar a:link { 
 
    text-decoration: none; 
 
    padding: 15px 162.5px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: auto; 
 
    color: white; 
 
    background-color: #003333; 
 
    font-size: 25px; 
 
    font-family: Courier New; 
 
} 
 
#navbar ul li a:hover { 
 
    color: black; 
 
    background-color: #c2d6d6; 
 
    text-decoration: line-through; 
 
} 
 
#navbar { 
 
    background-color: #003333; 
 
    width: 100%; 
 
    height: 68px; 
 
    border-radius: 15px; 
 
} 
 
a { 
 
    display: block; 
 
    width: 100px; 
 
    background-color: #003333; 
 
    transition-duration: 1s; 
 
} 
 
#navbar #currentpage a { 
 
    color: black; 
 
    text-decoration: line-through; 
 
    background-color: #c2d6d6; 
 
}

[EDIT] Спасибо за все ваши ответы!

источник

2016-05-26 Nanda Ardianto

пожалуйста, вы можете поместить свой код htnl в фрагмент. – Jainam

Вы можете попробовать CSS3 VH- и Vw единиц

подробно проверить ссылку ниже

проверки этого

css3 units

viewport-sized-typography

viewport-units-vw-vh-vmin-vmax

источник

2016-05-26 09:40:08 Shree29

body { 
 
    background-image: url("background2.jpg"); 
 
} 
 
a { 
 
    display: block; 
 
    background-color: #003333; 
 
    transition-duration: 1s; 
 
} 
 
#navbar { 
 
    background-color: #003333; 
 
    border-radius: 15px; 
 
    overflow: hidden; 
 
} 
 
#navbar ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    table-layout: fixed; 
 
    display: table; 
 
    padding: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
#navbar ul li { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#navbar a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    padding: 15px 10px; 
 
    background-color: #033; 
 
    font-size: 25px; 
 
    font-family: Courier New; 
 
} 
 
#navbar ul li a:hover { 
 
    color: black; 
 
    background-color: #c2d6d6; 
 
    text-decoration: line-through; 
 
} 
 

 
#navbar #currentpage a { 
 
    color: black; 
 
    text-decoration: line-through; 
 
    background-color: #c2d6d6; 
 
}

<nav id="navbar"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Biography</a></li> 
 
    <li><a href="#">Gallery</a></li> 
 
    <li><a href="#">Events</a></li> 
 
    </ul> 
 
</nav>

источник

2016-05-26 09:41:09

Ну, если все, что вы хотите, чтобы масштабировать меню, я хотел бы использовать относительные единицы видового экрана (vw для ширины и vh по высоте, как действующий в процентах от размера окна просмотра).

Вы также можете попробовать использовать функцию CSStransform: scale() и/или zoom.

Обратите внимание, что оба они все еще работают над черновиками (хотя они широко поддерживаются современными браузерами).

Для отзывчивости я бы послал вам прочитать немного больше о @media queries.

источник

2016-05-26 09:45:38

<!DOCTYPE html> 
<html> 
<head> 
<title>equal width</title> 

<style type="text/css"> 
html { font: 0.75em/1.5 sans-serif; } 
.tabs { margin: 0; padding: 0; list-style: none; display: table; table-layout: fixed; width: 100%; } 
.tabs__item { display: table-cell; } 
.tabs__link { display: block; } 
.primary-nav { text-align: center; border-radius: 4px; overflow: hidden; } 
.primary-nav a { padding: 1em; background-color: #BADA55; color: #fff; font-weight: bold; text-decoration: none; } 
.primary-nav a:hover { background-color: #A3C43B; } 
</style> 
</head> 

<body> 
    <ul class="tabs primary-nav"> 
    <li class="tabs__item"> 
     <a href="#" class="tabs__link">Home</a> 
    </li> 
    <li class="tabs__item"> 
     <a href="#" class="tabs__link">About</a> 
    </li> 
    <li class="tabs__item"> 
     <a href="#" class="tabs__link">Work</a> 
    </li> 
    <li class="tabs__item"> 
     <a href="#" class="tabs__link">Contact</a> 
    </li> 
</ul> 
</body> 
</html>

источник

2016-05-26 09:49:10 Nehemiah

В ответном меню вы можете ссылаться на приведенную ниже ссылку. http://www.meanthemes.com/plugins/meanmenu/ – Nehemiah

CSS Navbar content scaling

ответ

Смежные вопросы