Skip to content

Commit

Permalink
style: Adapt to mobile devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@lopins
lopins committed Nov 1, 2024
1 parent f97eccb commit 5bd2254
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 36 deletions.
27 changes: 8 additions & 19 deletions docs/css/images.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,16 @@ body {
z-index: 1000;
box-sizing: border-box;
}
@media screen and (max-width: 1200px) {
.header {display: none;}
}

.logo {
margin-top: 10px;
margin-left: 30px;
float: left;
}
@media only screen and (max-device-width: 480px) {.logo{filter: invert(100%);}}

.close {
float: right;
Expand Down Expand Up @@ -281,32 +285,17 @@ input{font-family:'Ping hei','Source Han Sans';}
.box{ min-height: initial;
width: 100%; /*max-width:320px;*/}
.show_box{ padding:0px 20px;}
.left{ width:100%; height:50%;min-height:440px; position: static;}
.left{width:100%; height:50%;min-height:440px;position: static; display:none;}
.show_img>img{ width:70%;}
.show_img{ text-align: center;}
.right{ width:100%; height:40%; position: static;padding-top: 60px;padding-bottom:0px;}
.right{ width:100%; height:40%; position: static;/*padding-top: 60px;*/padding-bottom:0px;}

.close_btn2,.close_btn{
position: fixed;}
.close_btn2 .icon-left,.close_btn2 .icon-left:before,.close_btn2 .icon-left:after,.close_btn2 .icon-right,.close_btn2 .icon-right:before,.close_btn2 .icon-right:after{ background-color:#FFFFFF;}

}
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */
body{ width:100%; overflow:hidden;}
.logo img{ width: 150%;}
.box{ min-height: initial;
width: 100%; max-width:320px;}
.show_box{ padding:0px 20px;}
.left{ width:100%; height:50%;min-height:440px; position: static;}
.show_img>img{ width:70%;}
.show_img{ text-align: center;}
.right{ width:100%; height:40%; position: static;padding-top: 60px;padding-bottom:0px;}

.close_btn2,.close_btn{
position: fixed;}
.close_btn2 .icon-left,.close_btn2 .icon-left:before,.close_btn2 .icon-left:after,.close_btn2 .icon-right,.close_btn2 .icon-right:before,.close_btn2 .icon-right:after{ background-color:#FFFFFF;}

}
.version_box ul,.version_box li,.version_box dd{ list-style: none; margin: 0px; padding: 0px;}
.version_box li,.version_box dd{ display: inline-block;
width: 85px;
Expand All @@ -323,12 +312,12 @@ body{ width:100%; overflow:hidden;}
margin-bottom: 10px;}
.version_box li:hover{ border: 1px solid #14cc70;
color: #14cc70;}
.version_box {
/* .version_box {
display: table-cell;
vertical-align: middle;
padding-left: 100px;
box-sizing: border-box;
}
} */
.form_group {
margin: 20px 0;
position: relative;
Expand Down
51 changes: 37 additions & 14 deletions docs/css/windows.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,18 @@
}
.left,.right{
float: left;
width: 50%;
height: 100%;
/*padding-top: 150px;*/
/*padding-bottom: 150px;*/
box-sizing: border-box;
}
@media screen and (min-width: 640px) {
.left,.right{width: 50%;}
.download_content{margin: 0 auto;width: 95%;}
}
.left{
background: #14cc70;
display: table;
/* display: table; */
position: absolute;
top: 0;
bottom: 0;
Expand All @@ -35,7 +38,7 @@
position: absolute;
top: 0;
bottom: 0;
left: 50%;
/* left: 50%; */
right: 0;
}
.show_box{
Expand Down Expand Up @@ -66,9 +69,17 @@
.version_box{
display: table-cell;
vertical-align: middle;
padding-left: 100px;
box-sizing: border-box;
}
@media screen and (max-width: 640px){
.version_box{
margin: 0 auto;
width: 95%;
}
.version_box .choose,.version_box .tip_title,.version_box .down_btn{
text-align: center;
}
}
.form_group{
margin: 40px 0;
position: relative;
Expand Down Expand Up @@ -230,11 +241,12 @@
margin-left: 10px;
}
.office_btn{
display: none;
position: absolute;
padding-left: 100px;
padding-top: 38px;
z-index: 1000;
/*width: 100%;*/
/*z-index: 1000;
width: 100%;*/
background: #fff;
}
.btn_down{
Expand All @@ -247,19 +259,23 @@
}

.index_footer{
position: absolute;
position: fixed;
height: 50px;
width: 50%;
line-height: 50px;
bottom: 0;
width: 100%;
padding-left: 100px;
text-align: center;
background: #fff;
/*z-index: 1111;*/
/* z-index: 1111; */
box-sizing: border-box;
}
@media screen and (max-width: 640px) {
.index_footer{height: 100px;width: 100%;}
.index_footer a:nth-last-child(-n+3) {display: none;}
}

.index_footer a{
z-index: 1000;
/* z-index: 1000; */
/*cursor: pointer;*/
margin-right: 25px;
color: #b3b3b3 !important;
Expand All @@ -276,17 +292,24 @@
left: -80px;
}
.version_content{
height: calc(100% - 170px);
height: calc(100% - 100px);
overflow: auto;
display: block !important;
margin-top: 120px;
/* margin-top: 120px; */
}
@media screen and (min-width: 640px) {.version_content{width: 90%;margin: 0 auto;}}

#dialog{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:9999; display: none}
#dialog .close_btn{ width:40px; height:40px; position:absolute; right:38px; top:-30px; background:url(images/close_btn.png) no-repeat center #000000; display:block;box-shadow: 2px 2px 10px #888888; cursor:pointer;}
#dialog .close_btn:hover{ box-shadow: 2px 2px 10px #000;}
#dialog .bg{ width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
#dialog .area{ position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-269px; width:386px; padding:40px; background-color:#FFFFFF;text-align: center; }
@media screen and (max-width: 640px) {
#dialog .area{ width:95%; padding:5px;}
}
@media screen and (min-width: 640px) {
#dialog .area{ width: 386px; padding:40px;}
}
#dialog .area{ position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-269px; background-color:#FFFFFF;text-align: center; }
#dialog .area .title{font-size: 28px; display:block;color: #000000; margin:0px; font-weight:normal;letter-spacing: 0; margin-bottom:20px;}
#dialog .area .code{color: #b2b2b2;font-size: 14px;margin-top: 40px;}
#dialog .area .recommend {color: #b2b2b2;font-size: 14px;margin-bottom: 10px;}
Expand Down
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<div class="show_desc">微软官方原版镜像仓库</div>

<div class="show_img">
<img id="w_img" src="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/images/default_windows.png" alt="Windows原版镜像下载站"/>
<img id="w_img" src="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/images/default_windows.png" alt="Windows原版镜像下载站" style="height:470px"/>
</div>
<div class="show_detail" id="home_desc">
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/office.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<div class="show_name">MSDN镜像库</div>
<div class="show_desc">微软官方原版镜像仓库</div>
<div class="show_img">
<img id="w_img" src="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/images/default_windows.png" alt="Windows原版镜像下载站"/>
<img id="w_img" src="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/images/default_windows.png" alt="Windows原版镜像下载站" style="height:470px"/>
</div>
<div class="show_detail" id="home_desc">
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/windows.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<div class="show_desc">微软官方原版镜像仓库</div>

<div class="show_img">
<img id="w_img" src="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/images/default_windows.png" alt="Windows原版镜像下载站"/>
<img id="w_img" src="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/images/default_windows.png" alt="Windows原版镜像下载站" style="height:470px"/>
</div>
<div class="show_detail" id="home_desc">
</div>
Expand Down

0 comments on commit 5bd2254

Please sign in to comment.