css @media проблемы с дисплеем, нужно уточнить

Question

Хорошо, я некоторое время назад работал над небольшим сайтом, получил вызов для его мобильной версии, поэтому я взял основной html / css, сделал дубликаты, чтобы я мог работать и не бояться что-нибудь испортить,а затем свяжите оригинал с новым мобильным CSS, когда закончите.

Теперь, когда я примерно сделал это, я сейчас работаю только над главной мобильной страницей / индексом, и я придумал ... ну,позвольте мне показать вам

Это тот же HTML-код, который находится на текущем фактическом сайте с помощью копирования / вставки, но с подключенным только мобильным CSS (для быстрого тестирования).Вот как это должно выглядеть: http://somdowprod.net/4testing/indexMOBILESAMPLE ничего особенного.

Теперь ЭТО ЖЕ, как указано выше, с тем же контентом, купленным в медиа-запросах: http://somdowprod.net/4testing/index2

По этой второй ссылке, если вы измените размер своего браузера на что-то около 400 полос, вы увидите, что он смещается вниз, как положено, но искажено.Кроме того, при просмотре на iPhone вы увидите тот же беспорядок.

Все, что я делал по-разному между верхом и низом, это то, что снизу я добавил

<link href="2882maincssHTML5.css" rel="stylesheet" type="text/css" media="screen" />
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)"  /> 

иCSS я добавил то же самое:

РЕДАКТИРОВАТЬ: Скопировал неправильный код на CSS

 @media screen and (min-width: 0px) and (max-width: 480px) {
    @import url("mobile.css");
}

Есть идеи?Я потерян, я мог понять, не сработало ли это с первым оригиналом, но ... да.

Answer 1

Если вы удалите этот код из 2882maincssHTML5.css, он будет работать:

@media screen and (min-width: 0px) and (max-width: 480px) {
    @import url("mobile.css");
}

Вы уже связали таблицу стилей:

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)"  />

Однако вы можете переписать, чтобы удалить type (не требуется в HTML5) и min-width, поскольку они не нужны.

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 480px)"  />

Answer 2

Я посмотрел на него через Firefox, и я не увидел никаких искажений, похоже, он работает нормально, единственная проблема, которую я увидел, была в разделе:

<aside id="topics" class="floatEmL">
<h3>Hello and WELCOME to 2882films website.</h3>
<p>&nbsp;</p>
<p> 2882 Films create highly targeted content that delivers results.
We provide clients  with the highest quality video production capabilities 
and then deliver that content through all avenues of media distribution 
from the Web to Television. Here at 2882Films, we broadcasts your 
message directly to your audience. </p>

Когда ширина браузера изменяется, край этого поля висит над правой стороной примерно на 20 пикселей, что означает, что он не изменяет размеры в браузере, что, по сути, может вызвать проблемы.

Надеюсь, это немного поможет.