Question

我想使用

覆盖字体大小和页面视图

@media screen and (max-device-width: 640px){
body 
{ 
font-size: 1.2em; 
max-width: 80%;  }
}

字体大小应增加到1.2，宽度减少80％但由于CSS中的绝对值

，情况并非如此

采用％年龄有助于实现目标

.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的新手，必须尝试将网站转换为响应式 - 您对宽度和字体大小的％条款的建议会帮助我朝正确的方向发展

由于

Answer 1

您可以在％age和px 中设置宽度，在 em，％age或px 中设置字体。

由您来决定更改边距还是以像素为单位。

关于％age ：

如果声明每个相对元素的宽度，效果会更好。

例如：

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等于当前的字体大小。浏览器中的默认文本大小为16px。因此，1em的默认大小为16px。

我建议在body标签中设置px中的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 */
   }
}

我通常会定义标准的边距/填充，并保持不变，同时使用媒体查询更改页面的其余部分。例如：

.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 */
    }
}

将模板转换为响应。字体大小，以％为单位的宽度，但填充和边距如何

1 个答案: