响应式 CSS @media 查询 [英] Responsive CSS @media queries
问题描述
为了使我的网站具有响应性，我使用了这样的媒体查询
For making responsive my website I'm using media queries like this
@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 即将到来，而其他两个查询不起作用.即使我正在尝试 min-width:320px 但结果是一样的.现在我该怎么办?我的另一个问题是:最大宽度和最小宽度有什么区别?我应该在什么时候使用哪一个?
but when I try to test my website there is some issue I've facing. One kind of issue is @media 320px is alright but when I re-size my webpage 320px to 480px or 640px by default 320px is coming and other two queries not working. Even I'm trying with min-width:320px but result is same. Now what should I do? My another question is: What is the different between max-width and min width? and Which one should I use when?
也试过这个.代码:
@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 屏幕和(最小宽度:320px){此代码将在屏幕 320px 及以上运行如果你把代码放在这里当然这段代码将在 480px 和 680px 下运行}
That's wrong code.. @media screen and (min-width: 320px){ this code will run at screen 320px and above if you put the code here of course this code will run at 480px and 680px }
top 阻止该代码来自 480px 和 680px弄成这样@media screen and (min-width: 320px) and (max-width: 479px){这里的代码}
top prevent that code from the 480px and 680px Make it like this @media screen and (min-width: 320px) and (max-width: 479px){ the code here }
这篇关于响应式 CSS @media 查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
