html - 我的媒体查询是否正确
问题描述
我想知道是否有人可以告诉我我的媒体查询是否正确。我对网页设计完全陌生,我正在上一门课程。我必须让我的网站响应并在今晚提交,但我真的很挣扎。我花了几个小时研究和改变事情,但由于某种原因,我的查询似乎不适用于某些事情。
这些是我到目前为止所做的
/*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;
}
老实说,我本可以制作完整的球,我知道我是否应该从头开始重做大部分内容,但我至少必须在今晚之前提交一些东西。希望有人可以帮助我!谢谢!
解决方案
使用媒体查询时,您可以为不同的屏幕尺寸堆叠您想要的所有代码,并将它们一起使用,如下所示:
@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;
}
}
这是您的第一个查询,您可以对其他 2 个查询执行相同操作。
推荐阅读
- xquery - 如何在 MarkLogic 数据中心框架中嵌入自定义代码?
- python - 如何使用 python 获取有关文件属性>详细信息的信息?
- javascript - 如何滑动切换引导导航选项卡?
- python-3.x - 使用 pandas 查找数据框中各行的均值
- javascript - 处理客户端错误并阻止它们在特定库的浏览器控制台中显示?
- html - 表格列旋转但如何定位旋转的单元格。
- macos - OSX 中 MKL BLAS 和 Accelerate Framework BLAS 之间的 DSCAL 不一致
- regex - 正则表达式:以特定单词开头并排除一组单词
- java - 使用 Junit 比较数组元素
- microsoft-graph-api - Microsoft Graph API:创建计划返回“MaximumPlannerPlans”异常