我为一个项目列表创建了一个媒体查询，以便针对不同的屏幕宽度进行不同的对齐。但我似乎无法让我的媒体查询运行。以下是我的HTML和CSS代码
HTML
<div class="a-checkpoint-list col-sm-12">
<ul>
<li>View</li>
<li>Edit</li>
<li>Delete</li>
<li>Bye</li>
</ul>
</div>
CSS
.a-checkpoint-list > ul li{
background-image: url(../images/checkbox.svg);
list-style-type:none;
background-repeat: no-repeat;
line-height: 30px;
padding-left: 5%;
font-size:17px;
margin-top:3%;
}
.a-checkpoint-list > ul {
margin-left:40%;
}
@media only screen and (max-width: 991px){
.a-checkpoint-list > ul {
margin-left: 15% !important;
}
.a-checkpoint-list > ul li {
padding-left: 10% !important;
}
}
答案 0 :(得分：1)
如果您的所有媒体查询都是正确的但是您无法获得输出，那么如果您添加了html <head>，则请检查以下代码。如果你没有添加，那么你的媒体查询就不起作用了。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
答案 1 :(得分：0)
您的媒体查询缺少左括号var fs = require('fs');
var readline = require('readline');
var google = require('googleapis');
var googleAuth = require('google-auth-library');
var GoogleSpreadsheets = require('google-spreadsheets');
var secrets = require('./client_secret.json');
var SCOPES = ['https://spreadsheets.google.com/feeds', 'https://spreadsheets.google.com/feeds/worksheets/key/private/basic',
];
var TOKEN_DIR = (process.env.HOME || process.env.HOMEPATH ||
process.env.USERPROFILE) + '/.credentials/';
var TOKEN_PATH = TOKEN_DIR + 'drive-nodejs-quickstart.json';
fs.readFile('client_secret.json', function processClientSecrets(err, content) {
if (err) {
console.log('Error loading client secret file: ' + err);
return;
}
authorize(JSON.parse(content), getSheet);
});
function authorize(credentials, callback) {
var clientSecret = credentials.installed.client_secret;
var clientId = credentials.installed.client_id;
var redirectUrl = credentials.installed.redirect_uris[0];
var auth = new googleAuth();
oauth2Client = new auth.OAuth2(clientId, clientSecret, redirectUrl);
fs.readFile(TOKEN_PATH, function(err, token) {
if (err) {
getNewToken(oauth2Client, callback);
} else {
oauth2Client.credentials = JSON.parse(token);
callback(oauth2Client);
}
});
}
function getNewToken(oauth2Client, callback) {
var authUrl = oauth2Client.generateAuthUrl({
access_type: 'offline',
scope: SCOPES
});
console.log('Authorize this app by visiting this url: ', authUrl);
var rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
rl.question('Enter the code from that page here: ', function(code) {
rl.close();
oauth2Client.getToken(code, function(err, token) {
if (err) {
console.log('Error while trying to retrieve access token', err);
return;
}
oauth2Client.credentials = token;
storeToken(token);
callback(oauth2Client);
});
});
}
function storeToken(token) {
try {
fs.mkdirSync(TOKEN_DIR);
} catch (err) {
if (err.code != 'EEXIST') {
throw err;
}
}
fs.writeFile(TOKEN_PATH, JSON.stringify(token));
console.log('Token stored to ' + TOKEN_PATH);
}
function getSheet(auth) {
GoogleSpreadsheets({
key: '<SpreadSheetKey>',
auth: oauth2Client
}, function(err, spreadsheet) {
if (err) {
console.log('--------------err: ');
console.log(err);
return;
} else {
console.log('--------------reading sheet: ');
spreadsheet.worksheets[0].cells({
}, function(err, cells) {
console.log('================MADE IT HERE!!!!!!!!!!!!!!');
if (err) {
console.log(err);
return;
}
for(var prop in cells) {
console.log('for loop');
var value = cells[prop];
console.log(prop, value);
}
});
}
})
}
：
更新了CSS
{答案 2 :(得分：0)
你忘了{这个。媒体查询开始比用于此
@media only screen and (max-width: 991px){
.yourClass{}
}
.a-checkpoint-list > ul li{
background-image: url(../images/checkbox.svg);
list-style-type:none;
background-repeat: no-repeat;
line-height: 30px;
padding-left: 5%;
font-size:17px;
margin-top:3%;
}
.a-checkpoint-list > ul {
margin-left:40%;
}
@media only screen and (max-width: 991px){
.a-checkpoint-list > ul {
margin-left: 15%;
}
.a-checkpoint-list > ul li {
padding-left: 10%;
}
} <div class="a-checkpoint-list col-sm-12">
<ul>
<li>View</li>
<li>Edit</li>
<li>Delete</li>
<li>Bye</li>
</ul>
</div>
答案 3 :(得分：0)
它是一个简单的样式错误，媒体查询中缺少左括号
@media only screen and (max-width:991px)
{
.a-checkpoint-list > ul {
margin-left: 15%;
}
.a-checkpoint-list > ul li {
padding-left: 10%;
}
}
答案 4 :(得分：0)
我已经意识到为什么我的媒体查询没有按照他们应该的方式行事。我把我的媒体查询放在我的css文件的顶部。一旦我将所有媒体查询都带到了css文件的底部，他们就完美地工作了！