Amn*_*non 1 html css viewport google-chrome-extension responsive-design
我正在开发一个chrome扩展名，并且以.psd的形式获得了设计。我有所有图层的px值。设计在1225X2019屏幕上进行，导致我的较小屏幕上的弹出窗口，字体，边距，间距等过大。
在我的css文件中，我使用了从设计中获得的px值，并使用了“ Adobe Assets”。
我不明白为什么“元视口”行不能使它响应。对于间距和边距，我还尝试使用Bootstrap的网格（class =“ col-md-1”），但似乎没有任何效果。
这是我的CSS和HTML代码段：
body {
font-family: 'Source Sans Pro';
width: 738px;
background-color: #eceff1;
}
#Hired_RSS
/*Hired RSS*/
{
padding-left: 46px;
padding-top: 10px;
background-color: #455a64;
color: #ffffff;
height: 77px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 37.5px;
font-weight: 700;
font-style: italic;
letter-spacing: 0.937px;
text-align: left;
}
#toolbar {
background-color: #b0bec5;
width: 738px;
height: 67px;
}
#Feeds {
margin-left: 47px;
margin-right: 50px;
background-color: #b0bec5;
color: #455a64;
font-family: 'Source Sans Pro';
font-size: 31.25px;
font-weight: 300;
font-style: italic;
letter-spacing: 0.781px;
text-align: center;
}
#Live {
margin-right: 27px;
font-family: 'Source Sans Pro';
color: #eceff1;
font-size: 31.25px;
font-weight: 700;
font-style: italic;
letter-spacing: 0.781px;
text-align: center;
}
#Researched {
margin-right: 50px;
font-family: 'Source Sans Pro';
font-size: 31.25px;
font-weight: 700;
font-style: italic;
letter-spacing: 0.781px;
text-align: center;
}
#Settings {
font-family: 'Source Sans Pro';
font-size: 31.25px;
font-weight: 700;
font-style: italic;
letter-spacing: 0.781px;
text-align: center;
}
#plus {
padding-top: 5px;
margin-right: 21px;
margin-bottom: 97px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" ; content="width=device-width, initial-scale=1">
<script src="/libraries/js/jquery-2.0.3.min.js"></script>
<!-- Cascading Style Sheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/libraries/css/popupstyle.css">
<title>RSS Extension's Popup</title>
</head>
<body>
<div id="Hired_RSS">Hired RSS
<input id="plus" type="image" src="/libraries/clipboard/plus.png" style="float: right;">
</div>
<div id="toolbar">
<span class="toolbar1" id="Feeds">Feeds</span>
<span class="toolbar1" id="Live">Live <kbd>10</kbd></span>
<span class="toolbar1" id="Researched">Researched <kbd>3</kbd></span>
<span class="toolbar1" id="Settings">Settings</span>
<br></br>
</body>
</html>这是很久以前问过的，但由于我只是在Google上搜索，并因缺乏答案而感到沮丧，所以我认为我会分享解决方案。
col-md-_在绝大多数情况下将不起作用，因为“ md”类仅适用于一定大小的屏幕，而弹出窗口几乎肯定不会。尝试使用col-xs-_。
有关大小的更多特定信息，请参阅引导CSS的媒体查询部分：http : //getbootstrap.com/css/#grid-media-queries