您好我一直在处理Web应用程序。我有一个包含里面的表格的div。代码如下所示:
<div class="row" style="margin-left:25%; width:90%;">
<div class="col s12 m6">
<div class="card white">
<div class="row">
<div class="col s12">
<form id="example-form">
<div>
<h3>Site</h3>
<section>
<div id="mustFill">
<label>Site Name</label>
<input id="siteName" type="text">
</div>
<div id="lookup_field">
</div>
<label>Address Line 1</label>
正如您所看到的,我在div上应用了css样式:
<div class="row" style="margin-left:25%; width:90%;">
我已应用css
使容器显示在页面的中心,以便在左边有一个边距,在%
中有特定的宽度。
我最初使用的是px
,如margin left:400px; width:800px
,这使得该页面在不同的屏幕尺寸上看起来很糟糕,例如iPad,手机,小屏幕笔记本电脑等。
但在CSS
中应用%
仍有同样的问题。如何将CSS
应用于此div,它针对所有屏幕尺寸进行了优化,看起来并不糟糕。
答案 0 :(得分:0)
使用calc函数
可以更精确<div class="row" style="margin-left:2em; width:calc(100%-4em);">
表示你的左边有2个字母宽度的边距,你应用的总宽度为100% - 4个字母宽度
我建议您使用class =“row”中的所有样式而不是样式,这样您就可以使用media queries
在不同的设备上使用不同的样式.row {
margin-left:2em;
width:calc(100%-4em);
}
@media only screen and (max-width: 480px) {
.row {
margin-left:1em;
width:calc(100%-2em);
}
}