我想知道是否有人可以告诉我我的媒体查询是否正确。 我是网页设计的新手,正在上一门课程。我必须使我的网站具有响应性并在今晚提交,但我真的很努力。我花了数小时研究和更改事物,但是由于某些原因,我的查询似乎不适用于某些事物。
这些是我到目前为止所做的
/*media queries*/
/*768px*/
@media only screen and (min-width: 768px)and(max-width:1024){
.tm-logo{
align-items: center;}
}
@media only screen and (min-width: 768px)and(max-width:1024){
.tm-nav ul li a{
padding: 20px 30px;
text-decoration: none;}
}
@media only screen and (min-width: 768px)and(max-width:1024){
.tm-nav ul li{
display: inline-block;
background-color: #80c625;
padding: 10px;
}
}
@media only screen and (min-width: 768px)and(max-width:1024){
.divTableBody {
padding: 5px;
align-content: center;}
}
@media only screen and (min-width: 768px)and(max-width:1024){
.more{align-items: center;}
}
@media only screen and (min-width: 768px)and(max-width:1024){
.wish{width:100%;
float:none;
align-items: center;}
}
@media only screen and (min-width: 768px)and(max-width:1024){
.whybody img{
float: none;
align-items: center;}
}
@media only screen and (min-width: 768px)and(max-width:1024){
.why-logo{ text-align: center;
}
}
/******480px*****/
@media only screen and (min-width:320px)and(max-width:480px){
.wish{width:100%;
float:none;
align-items: center;}
}
@media only screen and (min-width:320px)and(max-width:480px){
.tm-logo{
align-items: center;}
}
@media only screen and (min-width:320px)and(max-width:480px){
.tm-nav ul li{
display: inline-block;
background-color: #80c625;
padding: 10px;
align-content: center;
}
}
@media only screen and (min-width:320px)and(max-width:480px){
.divTableBody {
padding: 5px;
margin: 5%;}
}
@media only screen and (min-width:320px)and(max-width:480px){
.more{
align-items: center;}
}
@media only screen and (min-width:320px)and(max-width:480px){
.whybody img{
align-items: center;
float: none;}
}
@media only screen and (min-width:320px)and(max-width:480px){
.why-logo{ text-align: center;
}
}
/********footer*******/
@media (max-width: 600px) {
.footer-distributed .footer-left,
.footer-distributed .footer-right{
text-align: center;
}
.footer-distributed .footer-right{
float: none;
margin: 0 auto 20px;
}
.footer-distributed .footer-left p.footer-links{
line-height: 1.8;
}
}
这是我的CSS:
/*default page style*/
body{
display: block;
background-color: #eeeeee;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
max-width: 100%;
padding: 0.5%;}
h1{color: #39a3c3;
font-size: 3em;}
h2{color: dimgray;
font-size: 2em;}
h3{color:#80c625;
font-size: 1em;}
p{font-size: 1em;}
/* NAVIGATION STYLE */
.tm-container{
margin:0 auto;
max-width: 100%;
}
.tm-header{
background: #fff;
}
.tm-header::after{
content:"";
clear: both;
display: block;
visibility: none;
}
.tm-logo{
float:left;
}
.tm-nav{
float:right;
font-size: 20px;
}
.tm-nav ul li{
display: inline-block;
background-color: #80c625;
}
.tm-nav ul li a{
padding: 10px 20px;
text-decoration: none;
color: #ffffff;
line-height: 60px;
}
.tm-nav ul li a:hover{
color: #ffea25;
background-color: #80c625;
}
/**********************navigation style finish**********************/
.rightimg{
float: right;
margin-top: 1em;
max-width: 100%;
margin-bottom: 0.5em;
}
/*****************start of What We Do styles***************************/
/* DivTable.com */
.divTable{
display: table;
max-width: 100%;
background-color: white;
float:left;
clear:none;
}
.divTableRow {
display: table-row;
max-width: 100%;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
max-width: 100%;
}
.divTableCell, .divTableHead {
border: 0.2em solid #ffffff;
display: table-cell;
padding: 0.5em;
text-align: center;
max-width: 100%;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
max-width: 100%;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
max-width: 100%;
}
.rightimg{
clear:both;
}
/****************************More Button***************************/
.more {
background-color:#2fa1c4;
-moz-border-radius:8em;
-webkit-border-radius:8em;
border-radius:6em;
border:1px solid #ffffff;
border-color: #ffffff;
display:block;
margin: auto;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:90%;
padding:8% 10%;
text-decoration:none;
align-items: center;
}
.more:hover {
background-color:#80c625;
}
.more:active {
position:relative;
top:1px;
}
.image-table {clear: both}
/****************end of What We Do styles************/
.wish{
float: right;
max-width: 100%;
margin-bottom: 0.5em;
margin-top: 0.5em;
clear: both;
}
/*******************start of Why Choose Us section**************/
.whybody {
background-color: #ffffff;
height: auto;
float: left;
padding-top: 0.5em;
padding-bottom: 0.5em;
max-width: 100%;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.whybody img{
float: left;
padding-left: 1em;
max-width: 100%;
}
.why-logo{
display: inline-block;
padding-left: 0.5em;
}
.textlist {
display: inline-block;
font-size: 12px;
list-style-image: url('images/bluedot.png');
padding-bottom: 0.5em;
}
.textlist ul li {
word-wrap: normal;
padding-right: 1em;
}
/****************end of Why Choose Us section******************/
/******************Brands section*******************/
.flexbox-header{
display: flex;
justify-content: center;
width: 100%;
background: #ffffff;
}
.flexbox-item {
background: #ffffff;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 100%;
}
.flexbox-item img{
width: 100%;
}
/*****start of footer*****/
.footer-distributed{
background-color: #80c625;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: normal 16px sans-serif;
padding: 45px 50px;
margin-top: 30px;
}
.footer-distributed .footer-left p{
color: #ffffff;
font-size: 14px;
margin: 0;
}
/* Footer links */
.footer-distributed p.footer-links{
font-size:18px;
font-weight: bold;
color: #ffffff;
margin: 0 0 10px;
padding: 0;
}
.footer-distributed p.footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-right{
float: right;
margin-top: 6px;
max-width: 180px;
}
.footer-distributed .footer-right a{
display: inline-block;
width: 35px;
height: 35px;
background-color: #ffffff;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-left: 3px;
}
老实说,我本可以准备完整的球,我知道是否应该从头开始重做大部分,但是我必须至少在今天晚上之前提交一些内容。希望有人可以帮助我! 谢谢!
答案 0 :(得分:2)
使用媒体查询时,您可以将所需的所有代码堆叠到不同的屏幕尺寸,并按以下方式一起使用:
@media only screen and (min-width:768px) and (max-width:1024px) {
.tm-logo{
align-items: center;
}
.tm-nav ul li a{
padding: 20px 30px;
text-decoration: none;
}
.tm-nav ul li{
display: inline-block;
background-color: #80c625;
padding: 10px;
}
.divTableBody {
padding: 5px;
align-content: center;
}
.more {
align-items: center;
}
.wish {
width:100%;
float:none;
align-items: center;
}
.whybody img{
float: none;
align-items: center;
}
.why-logo {
text-align: center;
}
}
这是您的第一个查询,您可以对其他两个查询执行相同的操作。
答案 1 :(得分:0)
@media only screen and (min-width: 768px)and(max-width:1024px) {
.tm-logo {
align-items: center;
}
.tm-nav ul li a {
padding: 20px 30px;
text-decoration: none;
}
.tm-nav ul li {
display: inline-block;
background-color: #80c625;
padding: 10px;
}
.divTableBody {
padding: 5px;
align-content: center;
}
.more {
align-items: center;
}
.wish {
width: 100%;
float: none;
align-items: center;
}
.whybody img {
float: none;
align-items: center;
}
.why-logo {
text-align: center;
}
/******480px*****/
@media only screen and (min-width:320px)and(max-width:480px) {
.wish {
width: 100%;
float: none;
align-items: center;
}
.tm-logo {
align-items: center;
}
.tm-nav ul li {
display: inline-block;
background-color: #80c625;
padding: 10px;
align-content: center;
}
.divTableBody {
padding: 5px;
margin: 5%;
}
.more {
align-items: center;
}
.whybody img {
align-items: center;
float: none;
}
.why-logo {
text-align: center;
}
/********footer*******/
@media only screen and (max-width: 600px) {
.footer-distributed .footer-left,
.footer-distributed .footer-right {
text-align: center;
}
.footer-distributed .footer-right {
float: none;
margin: 0 auto 20px;
}
.footer-distributed .footer-left p.footer-links {
line-height: 1.8;
}
}
您可以执行此操作。测量宽度是媒体查询的一个很好的实际示例,但并不是唯一可用的方法。您在1024年之后没有提到 px ,也无需重新声明 @media only屏幕以及(min-width:768px)和(max-width:1024px)一次又一次:)