gpt4 book ai didi

css - 在移动设备上加载更大尺寸的横幅图片

转载 作者:太空宇宙 更新时间:2023-11-04 06:11:09 27 4
gpt4 key购买 nike

我正在使用:https://ready.mobi为所有设备测试我的网站。我有兴趣在索引的标题上正确设置图像。现在图像在所有设备上都看起来很好。此外,蓝色和橙色按钮彼此靠得太近,并且图片显得太大(您必须滚动才能看到)。

当前结果:

我已经设置了媒体查询来处理这个问题。显然它们工作不正常。

https://ready.mobi/#1164495-2wd6 (在这里输入可以在不同的设备上在线查看站点)

enter image description here

期望的结果:

https://ready.mobi/#1164490-t8g2 (在这里输入可以在不同的设备上在线查看站点)

enter image description here

代码笔:https://codepen.io/anon/pen/EzOONJ

.my_header_bg_color {

/*background-color: #4FB99F;*/
/*background-color: #00ADB5;*/
/*background-color: #6BB983;*/
background-color: #00AD80;

}

/* Standard media queries breakpoints */

@media (min-width: 320px) and (max-width: 480px) {
/* smartphones, iPhone, portrait 480x320 phones */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}

.productos_finales_home img {

padding-bottom: 15px;
}


.my_home_banner_image {

bottom: 0;
top: 0;
position: relative;
z-index: 0;
width: 60%;
display: block;
margin-right: auto;
margin-left: 165px;
}

/*.my_home_banner_image {*/
/*display: none;*/
/*}*/
.my_home_banner_title {
color: white;
font-size: 36px;
font-weight: bold;
}

.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}

.btn, h2, p {
margin-bottom: 10px;
}



.btn-comentario {
text-decoration: none;
background-color: #969696;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border: none;
}


.my_home_banner_left {
margin-left: 10px;
z-index: 100;
}

.stickers_referenciales {
margin-bottom: 5px;
}


}

@media (min-width: 481px) {
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}


.my_home_banner_image {

bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 40%;
display: block;
margin-right: auto;
margin-left: 185px;
}


.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}

.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}

.btn, h2, p {
margin-bottom: 10px;
}

.btn-comentario {
margin-bottom: 100px;
}

.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}

}

@media (min-width: 641px) {
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}


.my_home_banner_image {

bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 70%;
}


.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}

.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}

.btn, h2, p {
margin-bottom: 10px;
}

.btn-comentario {
margin-bottom: 100px;
}

.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}

.my_home_banner_lef_text {
margin-left: 10px;
z-index: 100;
}

}

@media (min-width: 961px) {
/* tablet, landscape iPad, lo-res laptops ands desktops */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}


.my_home_banner_image {

bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 60%;
}


.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}

.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}

.btn, h2, p {
margin-bottom: 10px;
}

.btn-comentario {
margin-bottom: 100px;
}

.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}

}

@media (min-width: 1025px) {
/* big landscape tablets, laptops, and desktops */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}


.my_home_banner_image {

bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 55%;
}


.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}

.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}

.btn, h2, p {
margin-bottom: 10px;
}

.btn-comentario {
margin-bottom: 100px;
}

.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}

.subscribe_field {
width: 350px;
}

}

@media (min-width: 1281px) {
/* hi-res laptops and desktops */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}


.my_home_banner_image {

bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 50%;
}

/*.my_home_banner_image_left {*/
/*display: none;*/
/*}*/
.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}

.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}

.btn, h2, p {
margin-bottom: 10px;
}

.btn-comentario {
margin-bottom: 100px;
}

.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}

.subscribe_field {
width: 350px;
}
}


.center-video {
margin: 0 auto;
width: 400px;
}

最佳答案

这样写:

@media (max-width: 480px) {

代替:

@media (min-width: 320px) and (max-width: 480px) {

关于css - 在移动设备上加载更大尺寸的横幅图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56396044/

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