我已经使用媒体查询来设计网站的某些部分。例如,我已经为1920 px宽的屏幕分辨率设置了某些设置,但是在我的15英寸笔记本电脑和25英寸台式机屏幕上它们看起来有所不同。他们看起来很不一样。 我怎样才能使它们看起来几乎一样?
@media (min-width: 1920px) {
#bluetitle {
padding-right: 357px;
}
}
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) {
#bluetitle {
padding-right: 235px;
}
}
@media screen and (min-device-width: 1601px) and (max-device-width: 1919px) {
#bluetitle {
padding-right: 310px;
}
}
<h5 class="elementor-heading-title elementor-size-default">
<p dir="rtl"><span id="bluetitle">Title<font color="#dff2f6">.</font></span><span style="font-family: Heebo, sans-serif; font-size: 1.938em; font-weight: 600;"></span></p>
</h5>
这是网站:mayabarber.co.il
下面是25英寸(1920宽分辨率,这就是它的外观)上的屏幕截图:
谢谢!
答案 0 :(得分:1)
在这种情况下,我认为您不需要媒体查询! 只需在标题容器上设置:text-align:就可以了,如果需要,可以在标题上保留填充。
#bluetitle{
padding-right:...px;
}
p{
text-align:right;
}
答案 1 :(得分:1)
您是否尝试通过将此元标记添加到html文档中来进行尝试? 并尝试为paddings / margings提供%值
<meta name="viewport" content="width=device-width, initial-scale=1.0">
答案 2 :(得分:1)
我刚刚在您的网站上使用Inspect element
测试了此CSS,看来还可以。
尝试像这样设置CSS:
#bluetitle {
background-color: #dff2f6;
padding-right: 1%; /* You can edit this as per your needs */
}
IMO,您不需要@media查询,因为在测试中,没有@media查询,您的网站就很好了。