为了使我的网站具有响应性,我正在使用像这样的媒体查询
@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,但结果是相同的。现在我该怎么办?
我的另一个问题是:最大宽度和最小宽度有什么区别?什么时候应该使用哪一个?
还尝试了这个。
代码:
@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屏幕和(最小宽度:320像素){
此代码将在320px及更高的屏幕上运行
如果您将代码放在此处,则该代码将以480px和680px运行
}
顶部防止该代码从480px和680px
像这样
@media屏幕和(最小宽度:320像素)和(最大宽度:479像素){
这里的代码
}
关于html - 响应式CSS @media查询,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37359695/