将模板转换为响应式。字体大小，宽度百分比，但填充和边距如何
Converting Template to Responsive. Font size, Width in %age, but how about Padding and Margins
我想使用
覆盖字体大小和页面视图
@media screen and (max-device-width: 640px){
body
{
font-size: 1.2em;
max-width: 80%; }
}
字体大小应增加到 1.2，宽度应减少 80%
但由于 CSS
中的绝对值，同样的事情并没有发生
例如，采用 %age 有助于实现目标
.innerpage-bodycontainer-left p { font: normal 11px Arial, Helvetica, sans-serif; }
替换 Em 中的字体大小是否适用于
.innerpage-bodycontainer-left p { font: normal .6875em Arial, Helvetica, sans-serif; }
对于宽度
.innerpage-bodycontainer-left-text-container .pageing-box{ width:1000px; float: left; }
在 %age 中替换它
.innerpage-bodycontainer-left-text-container .pageing-box{ width:100%; float: left; }
但是 - 我可以将 Padding 和 Margins 保留为绝对像素，还是在采用媒体查询之前还需要按百分比更改它们。
我是 css 的新手，必须尝试将网站转换为响应式 - 您关于 em 中宽度和字体大小百分比条款的建议将帮助我朝着正确的方向前进
谢谢
您可以在 %age 和 px 中设置 width，在 em、%age 或 px[= 中设置字体34=].
由您决定是同时更改边距还是以像素为单位保留它们。
大约 %年龄:
Works better if you declare the width of every relative elements.
例如：
html,body {
width:100%;
min-width:100%;
}
.mycontainer {
width:75%; /* will work properly because we have its parent width */
}
<body><div class="mycontainer">...</div></body>
大约 em:
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
我建议在 body 标签中以像素为单位设置 font-size，并且只触摸段落、链接和标题。示例：
body {
font-size:16px;
}
h1 {
font-size:2em; /* this is equal to 16*2 = 32px */
}
@media(max-width:768px) {
h1 {
font-size: 1.5em; /* smaller font on mobile. 1.5em == 16+8 == 24px */
}
}
我通常定义一个标准 margin/padding 并保持它们不变，同时使用媒体查询更改页面的其余部分。例如：
.mycontainer {
margin:15px;
padding:15px;
font-size:20px;
width:50%;
height:200px; /* having a fixed height will help you a lot */
}
/* not specifing margin will leave them untouched */
@media(max-width:992px) {
.mycontainer {
font-size:14px;
width:80%;
height:300px;
}
}
/* or you can use em */
@media(max-width:768px) {
.mycontainer {
font-size: 0.8em;
width:100%;
height:400px;
margin:10px; /* here I'm changing the margin for mobile */
}
}
我想使用
覆盖字体大小和页面视图@media screen and (max-device-width: 640px){
body
{
font-size: 1.2em;
max-width: 80%; }
}
字体大小应增加到 1.2，宽度应减少 80% 但由于 CSS
中的绝对值，同样的事情并没有发生例如，采用 %age 有助于实现目标
.innerpage-bodycontainer-left p { font: normal 11px Arial, Helvetica, sans-serif; }
替换 Em 中的字体大小是否适用于
.innerpage-bodycontainer-left p { font: normal .6875em Arial, Helvetica, sans-serif; }
对于宽度
.innerpage-bodycontainer-left-text-container .pageing-box{ width:1000px; float: left; }
在 %age 中替换它
.innerpage-bodycontainer-left-text-container .pageing-box{ width:100%; float: left; }
但是 - 我可以将 Padding 和 Margins 保留为绝对像素，还是在采用媒体查询之前还需要按百分比更改它们。
我是 css 的新手，必须尝试将网站转换为响应式 - 您关于 em 中宽度和字体大小百分比条款的建议将帮助我朝着正确的方向前进
谢谢
您可以在 %age 和 px 中设置 width，在 em、%age 或 px[= 中设置字体34=].
由您决定是同时更改边距还是以像素为单位保留它们。
大约 %年龄:
Works better if you declare the width of every relative elements.
例如：
html,body {
width:100%;
min-width:100%;
}
.mycontainer {
width:75%; /* will work properly because we have its parent width */
}
<body><div class="mycontainer">...</div></body>
大约 em:
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
我建议在 body 标签中以像素为单位设置 font-size，并且只触摸段落、链接和标题。示例：
body {
font-size:16px;
}
h1 {
font-size:2em; /* this is equal to 16*2 = 32px */
}
@media(max-width:768px) {
h1 {
font-size: 1.5em; /* smaller font on mobile. 1.5em == 16+8 == 24px */
}
}
我通常定义一个标准 margin/padding 并保持它们不变，同时使用媒体查询更改页面的其余部分。例如：
.mycontainer {
margin:15px;
padding:15px;
font-size:20px;
width:50%;
height:200px; /* having a fixed height will help you a lot */
}
/* not specifing margin will leave them untouched */
@media(max-width:992px) {
.mycontainer {
font-size:14px;
width:80%;
height:300px;
}
}
/* or you can use em */
@media(max-width:768px) {
.mycontainer {
font-size: 0.8em;
width:100%;
height:400px;
margin:10px; /* here I'm changing the margin for mobile */
}
}