0
Для создания отзывчивый мой сайт, я использую медиазапросы как этотАдаптивный CSS @media запросов
@media screen and (max-width: 320px){code}
@media screen and (max-width: 480px){code}
@media screen and (max-width: 640px){code}, но когда я пытаюсь проверить мой сайт есть какой-то вопрос, я перед , Одна из проблем - @media 320px в порядке, но когда я меняю размер моей веб-страницы 320px на 480px или 640px по умолчанию, 320px подходит, а другие два запроса не работают. Даже я стараюсь с минимальной шириной: 320 пикселей, но результат такой же. Теперь что мне делать? Мой новый вопрос: в чем разница между шириной max-width и min? и какой из них я должен использовать, когда?
Также попробовал это. Код:
@media screen and (min-width: 320px){code}
@media screen and (min-width: 480px){code}
@media screen and (min-width: 640px){code}Полный отзывчивым код,
Код:
/*640px*/
@media screen and (min-width : 640px) {
.colum {
max-width: 960px;
margin: 0 auto;
}
.navbar-header h1 {
margin-left: 20px;
}
.welcome_text h4 {
font-size: 25px;
}
.welcome_text h1 {
font-size: 50px;
letter-spacing: 20px;
}
.promo_title h1, .work_title h1 {
max-width: 640px;
}
.promo_title p, .work_title p{font-size: 18px;
color: #7e8287;
width: 620px;
padding: 0;
}
.promo_list{
margin-bottom: 390px;
}
.fix1{
overflow: hidden;
}
.clear1 {
clear: both;
margin-top: 20px;
}
.extramarg {
margin-top: 30px;
}
.rightborder {
position: absolute;
height: 175px;
border-right: 1px solid #d9dbdb;
right: 313px;
}
.single_list {
border-right: none;
width: 315px;
}
.rightimg {
background: none;
right: 0;
top: 0;
width: 0;
height: 0;
opacity:0;
}
.service_list {
padding: 60px 25px 20px;
text-align: center;
}
.leftarea {
width: 640px;
padding: 0 25px;
}
.service_list h1:before {
left: 36%;
}
.service_item .ss_list {
width: 295px;
padding-left: 0;
padding-bottom: 30px;
text-align: center;
}
.work_title p {
margin: 0;
}
.work_slider {
width: 50%;
}
.slider_detail h3 {
padding-top: 60px;
}
.promo_title h1, .work_title h1 {
font-size: 40px;
}
.msg_area .colum {
width: 640px;
}
.msg_area textarea {
width: 570px;
}
.contact input[type="text"], .contact input[type="email"] {
width: 540px;
}
.submit a {
padding: 10px;
}
.promo_title, .work_title {
padding-top: 60px;
}
}
/*480 */
@media screen and (min-width : 480px) {
.colum {
max-width: 320px;
margin: 0 auto;
}
.navbar-header h1 {
margin-left: 20px;
}
.welcome_text h1 {
font-size: 25px;
margin: 12px 0;
letter-spacing: 12px;
}
.welcome_text h4 {
font-size: 15px;
}
.promo_title h1, .work_title h1 {
max-width: 320px;
}
.promo_title p, .work_title p{
font-size: 12px;
color: #7e8287;
width: 340px;
padding:0;
}
.single_list {
border-bottom: 1px solid #d9dbdb;
border-right: 0;
padding: 20px 0;
width: 320px;
}
.promo_list div:last-child {
border-bottom: 0;
}
.promo_area {
margin-bottom: -230px;
}
.floatleft {
float: none;
}
.leftarea {
width: 320px;
}
.leftarea h1 {
text-align: center
}
.service_list p {
padding: 35px 0;
text-align: center;
}
.service_list h1:before {
left:75px;
}
.service_list h1 {
font-size: 38px;
}
.service_list {
padding: 60px 0;
}
.service_item .ss_list {
width: 320px;
padding-left: 0;
padding-bottom: 30px;
text-align: center;
}
.work_slider {
width: 80%;
margin: 0 auto;
}
.slider_detail h3 {
padding-top: 80px;
}
.promo_title h1, .work_title h1 {
font-size: 30px;
}
.rightimg {
background:none;
right: 0;
top: 0;
width:0;
height: 0;
opacity: 0;
}
.contact input[type="text"], .contact input[type="email"], .contact textarea{
width:320px;
}
.submit a {
padding: 10px;
}
.promo_title, .work_title {
padding: 40px 0;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media screen and (min-width : 320px) {
.colum {
max-width: 320px;
margin: 0 auto;
}
.navbar-header h1 {
margin-left: 20px;
}
.welcome_text h1 {
font-size: 25px;
margin: 12px 0;
letter-spacing: 12px;
}
.welcome_text h4 {
font-size: 15px;
}
.promo_title h1, .work_title h1 {
max-width: 320px;
}
.promo_title p, .work_title p{
font-size: 12px;
color: #7e8287;
width: 300px;
padding:0;
}
.single_list {
border-bottom: 1px solid #d9dbdb;
border-right: 0;
padding: 20px 0;
width: 320px;
}
.promo_list div:last-child {
border-bottom: 0;
}
.promo_area {
margin-bottom: -230px;
}
.floatleft {
float: none;
}
.leftarea {
width: 320px;
}
.leftarea h1 {
text-align: center
}
.service_list p {
padding: 35px 0;
text-align: center;
}
.service_list h1:before {
left:75px;
}
.service_list h1 {
font-size: 38px;
}
.service_list {
padding: 60px 0;
}
.service_item .ss_list {
width: 320px;
padding-left: 0;
padding-bottom: 30px;
text-align: center;
}
.work_slider {
width: 100%;
}
.slider_detail h3 {
padding-top: 60px;
}
.promo_title h1, .work_title h1 {
font-size: 30px;
}
.rightimg {
background:none;
right: 0;
top: 0;
width:0;
height: 0;
opacity: 0;
}
.contact input[type="text"], .contact input[type="email"], .contact textarea{
width:320px;
}
.submit a {
padding: 10px;
}
.promo_title, .work_title {
padding: 40px 0;
}
}
поставить запросы @media в обратном порядке, так как запросы верны для всех 3 случаев –
Вы имеете в виду 320 пикселей, а затем 480 пикселей, а затем 640 пикселей? –
да .. это запустит запросы, как было запланировано. –