gpt4 book ai didi

css - 将模板转换为响应式。字体大小,宽度百分比,但填充和边距如何

转载 作者:太空宇宙 更新时间:2023-11-04 12:04:08 24 4
gpt4 key购买 nike

我想使用

覆盖字体大小和页面 View
@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 中设置宽度,在em、%age 或 px 中设置字体。

由您决定是同时更改边距还是以像素为单位保留它们。

关于 %age:

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>

关于他们:

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 标记中以 px 为单位设置字体大小,并且只触摸段落、链接和标题。示例:

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

关于css - 将模板转换为响应式。字体大小,宽度百分比,但填充和边距如何,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29514011/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com