Медиа-запросы, которые я использую, не делают мое приложение отзывчивым? - PullRequest
Новая
       4

Медиа-запросы, которые я использую, не делают мое приложение отзывчивым?

0 голосов
/ 05 февраля 2020

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

HTML: 

<body>
    <div id="weather_wrapper">
    <div class="weatherCard">

      <div class="currentTemp">
        <p class = "help">Click on the temp to change units</p> 
        <p class="location"></p>
            <p class="temp"></p>
        </div>


      <div class="currentWeather">
        <span class = "weather-description"></span>
        <span class="conditions"></span>
            <div class="info">
                <span class="rain"></span>
                <span class="wind"></span>
            </div>
        </div>

    </div>
  </div>




    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script src="app.js"></script>
  </body>

CSS: 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2/css/weather-icons.min.css);


@media screen and (max-width: 350px) {
    body{
        width: 300px;
        height: 150px
    }
    #weather_wrapper{
        width: 300px;
    }
    .weatherCard{
        width: 300px;
    }

}

body{
background: linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
font-family: 'Open Sans';
}

#weather_wrapper{
    width: 500px;
    margin-left: 450px;
  margin-top: 150px;
}
.weatherCard{
    width: 400px;
    height: 200px;
    font-family: 'Open Sans';
    position: relative;
}
.currentTemp{
    width: 220px;
    height: 200px;
    background: rgb(41, 41, 41);
  color: rgb(255, 255, 255);
  position: absolute;
}
.temp:hover{
    text-decoration: underline;
    cursor: pointer;
}
.currentWeather{
    width: 180px;
    height: 200px;
    background: rgb(237, 237, 237);
    margin: 0;
  position: absolute;
    top: 0;
    right: 0;
}
.help{
    font-size: 15px;
    text-align: center;
    top: 15px;
    position: absolute;
    color: rgb(255, 255, 255);
}
.info{
  background: rgb(42, 178, 234);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 50px;
}
.temp{
    width: 100px;
    height: 50px;
    margin-top: 110px;
    margin-left: 80px;
    position: absolute;
    color: rgb(255, 255, 255);
}
.location{
    width: 120px;
    height: 30px;
    margin-top: 80px;
    margin-left: 80px;
    position: absolute;
    color: rgb(237, 237, 237)
}
.conditions{
    width: 100px;
    height: 30px;
    margin-top: 40px;
    margin-left: 60px;
    position: absolute;
}
.weather-description{
    margin-left: 59px;
    margin-top: 30px;
    margin-bottom: 50px;
    position: absolute;
}

.wind {
    width: 100%;
    margin-left: 30px;
    position: relative;
    font-size: 14px;
  }

  .wind::after {
    display: block;
    content: '\f050';
    font-family: weathericons;
    font-size: 25px;
    margin-left: 75px;
    position: absolute;
    bottom: -26px;
  }

JS Скрипка: https://jsfiddle.net/hpsfj653/

Я знаю, что если я установлю максимальную ширину, то она должна быть нацелена на все экраны ниже этого размера. Однако единственное, что действительно меняется, это ширина тела. Я также рассмотрел возможность установки «margin» для «# weather_Wrapper» и «.WeatherCard» на 0. Однако это не сработало.

Есть ли что-то, чего мне не хватает?

Ответы [ 3 ]

2 голосов
/ 05 февраля 2020

Вы должны написать часть с медиазапросами после других CSS правил (внизу), в противном случае обычные правила будут переопределять медиазапросы просто потому, что они следуют после их и все еще действительны для селекторов, которые они содержат в всех размерах.

0 голосов
/ 05 февраля 2020

Я вижу, что вы не убрали левое поле при реагировании, и вы должны соблюдать специфику css. Подробнее о css специфичности

См. W3schools css руководства по специфике

вы использовали носитель, который не соответствует специфике,

также вы можете попробовать использовать ! важный , он будет работать нормально.

см. фрагмент ниже. 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2/css/weather-icons.min.css);




body{
background: linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
font-family: 'Open Sans';
}

  
  @media screen and (max-width: 350px) {
  
	body{
		width: 300px!important;
		height: 150px!important;
	}
	#weather_wrapper{
		width: 100%!important;
    margin-left: 0px!important;
   
	}
	.weatherCard{
		width: 100%!important;
	}

}


#weather_wrapper{
	width: 500px;
	margin-left: 450px;
  margin-top: 150px;
}
.weatherCard{
	width: 400px;
	height: 200px;
	font-family: 'Open Sans';
	position: relative;
}
.currentTemp{
	width: 220px;
	height: 200px;
	background: rgb(41, 41, 41);
  color: rgb(255, 255, 255);
  position: absolute;
}
.temp:hover{
	text-decoration: underline;
	cursor: pointer;
}
.currentWeather{
	width: 180px;
	height: 200px;
	background: rgb(237, 237, 237);
	margin: 0;
  position: absolute;
	top: 0;
	right: 0;
}
.help{
	font-size: 15px;
	text-align: center;
	top: 15px;
	position: absolute;
	color: rgb(255, 255, 255);
}
.info{
  background: rgb(42, 178, 234);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 50px;
}
.temp{
	width: 100px;
	height: 50px;
	margin-top: 110px;
	margin-left: 80px;
	position: absolute;
	color: rgb(255, 255, 255);
}
.location{
	width: 120px;
	height: 30px;
	margin-top: 80px;
	margin-left: 80px;
	position: absolute;
	color: rgb(237, 237, 237)
}
.conditions{
	width: 100px;
	height: 30px;
	margin-top: 40px;
	margin-left: 60px;
	position: absolute;
}
.weather-description{
	margin-left: 59px;
	margin-top: 30px;
	margin-bottom: 50px;
	position: absolute;
}

.wind {
	width: 100%;
	margin-left: 30px;
	position: relative;
	font-size: 14px;
  }

  .wind::after {
	display: block;
	content: '\f050';
	font-family: weathericons;
	font-size: 25px;
	margin-left: 75px;
	position: absolute;
	bottom: -26px;
  }
  
  
  
  <body id="body">
    <div id="weather_wrapper">
  	<div class="weatherCard">

      <div class="currentTemp">
        <p class = "help">Click on the temp to change units</p> 
        <p class="location"></p>
  			<p class="temp"></p>
  		</div>
      

      <div class="currentWeather">
        <span class = "weather-description"></span>
        <span class="conditions"></span>
  			<div class="info">
  				<span class="rain"></span>
  				<span class="wind"></span>
  			</div>
        </div>

    </div>
  </div>




    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script src="app.js"></script>
  </body>
0 голосов
/ 05 февраля 2020

Вам не нужны медиа-запросы для достижения sh вашей цели. Во-первых, вы должны добавить высоту к тегам html и body следующим образом: 

html,body {
  height: 100%;
}

Во-вторых, вы не должны использовать фиксированные поля в все. попробуйте заменить идентификатор #wheater_wrapper следующим образом: 

#weather_wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Экран flex создаст гибкий контейнер, который будет адаптироваться к любой ширине устройства, а justify-content-center будет располагаться горизонтально, а align-items- центр будет располагаться вертикально (именно поэтому мы установили html и высоту тегов тела на 100%).

Дайте мне знать, если у вас есть какие-либо сомнения или проблемы с этим подходом.

...