1
У меня есть веб-сайт, на котором есть ответы на запросы СМИ. CSS работает отлично на Firefox и IE, но не на Chrome.CSS Media Query работает только при изменении размера браузера (Chrome)
В настоящее время на веб-сайте есть два плавающих divs, по мере того как ширина видового экрана уменьшается, стек div сверху друг на друга. (У меня есть «большой режим» и «малый режим»).
Моя проблема в том, что второй div должен быть top:20%, когда он находится в «большом режиме» - это работает в Firefox и IE, но работает только в Chrome, если я изменяю размер браузера. Это как Chrome игнорирует top:20%, когда первая страница загружается.
Это мой CSS в настоящее время (простите меня, если это не является совершенным, я только учится студент средней школы):
\t body{
\t \t margin:0;
\t \t padding:0;
\t }
\t
\t div{
\t \t height:90vh;
\t \t font-family: 'Roboto', sans-serif;
\t }
\t
\t #sectionone {
\t \t background-color:#AB3E5B;
\t \t padding-top:3%;
\t \t padding-left:20%;
\t \t padding-right:20%;
\t \t padding-bottom:0;
\t \t margin:auto;
\t \t }
\t \t
\t #sectiontwo {
\t \t text-align:center;
\t \t padding-top: 10%;
\t \t font-size:3.5vh;
\t \t color:#666666;
\t \t
\t }
\t
\t #sectionthree {
\t \t background-color:#AB3E5B;
\t \t
\t }
\t
\t #scrolldownimage {
\t \t bottom:10%;
\t \t position:absolute;
\t \t text-align:center;
\t \t left:50%;
\t \t margin-left:-6mm;
\t \t max-width:73px;
\t \t min-width:40px;
\t }
\t
\t /* WHEN IN SMALL MODE */
\t
\t @media screen and (max-width: 300mm) {
\t
\t #herophone {
\t \t max-width:100%;
\t \t max-height:55vh;
\t \t width:auto;
\t \t height:auto;
\t }
\t #onea {
\t \t float:left;
\t \t width:100%;
\t \t height:auto;
\t \t text-align:center;
\t \t max-height:80%;
\t \t
\t \t
\t }
\t
\t #oneb {
\t \t height:auto;
\t \t width:100%;
\t \t max-height:80%;
\t \t font-size:3.5vh;
\t \t text-align:center;
\t \t color: white;
\t \t position: relative;
\t }
\t }
\t
\t /* WHEN IN LARGE MODE */
\t
\t
\t @media screen and (min-width: 300mm) {
\t #onea {
\t \t width:45%;
\t \t height:80%;
\t \t \t float:left;
\t \t text-align:center;
\t \t display: block;
\t \t justify-content: center;
\t \t
\t \t
\t }
\t
\t #oneb {
\t \t width:45%;
\t \t height: 80%;
\t \t float:right;
\t \t font-size:5vh;
\t \t top:20%;
\t \t
\t \t max-height:80%;
\t \t text-align:center;
\t \t color: white;
\t \t position: relative;
\t \t
\t \t
\t \t }
\t \t
\t \t #herophone {
\t \t max-width:100%;
\t \t max-height:100%;
\t \t width:auto;
\t \t height:auto;
\t \t
\t \t }
\t \t
\t }<head>
\t \t <!DOCTYPE html>
\t \t <link rel="stylesheet" type="text/css" media="screen" href="styles.css">
\t \t <link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
</head>
<body>
\t \t \t
\t \t <div id="sectionone">
\t \t
<div id="onea">
<img src="images/Three - Small.png" height="auto" width="auto" alt="screenshot" id="herophone">
</div>
<div id="oneb">
store maps
<br>
\t \t \t in your pocket.
<br>
<br>
\t \t \t meet wai
<br>
\t \t \t <span style="font-size:2vh"> (where am i)</span>
</div>
<br>
\t \t <p>
<a data-scroll data-options='{"easing":"easeOutQuad"}' href="#sectiontwo">
<img src="images/down.png" alt="down" width="10mm" height="auto" id="scrolldownimage">
</a>
</p>
</div>
\t \t <div id="sectiontwo">
WAI (Where am I) is a phone app that has been developed to make shopping easier.
<br>
<br>
Get instant access store maps of some of Australia's leading shopping centres.
<br>
<br>
</div>
<div id="sectionthree">
</div>
</body>
<!-- Scroll Script -->
<script src="scroll/dist/js/smooth-scroll.js"></script>
<script>
smoothScroll.init();
</script>
Конструкция работает в фрагменте кода выше, но не работает при правильном открытии в Chrome. – Jason
Работает в хроме для меня: http://jsfiddle.net/b52ymjkn/ –
любые ссылки, которые мы можем просмотреть? – Math3w