style: adapt to mobile devices

lopins · Nov 1, 2024 · 82249f8 · 82249f8
1 parent f97eccb
commit 82249f8
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 74 deletions.
diff --git a/docs/about.html b/docs/about.html
@@ -13,7 +13,7 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/css/menu.css" /> 
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/css/re_main.css"> -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/css/images.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/css/about.css" />
+    <link rel="stylesheet" type="text/css" href="/css/about.css" />
 </head>
 
 <body>
@@ -34,21 +34,13 @@
             <div class="instructions">
                 MSDN镜像库是一个提供MSDN原版Windows系统和原版office下载与安装指引的网站，本站一直以“致力于原版windows生态服务”为自身使命，为广大的电脑爱好者提供最新、最纯净、最安全的原版系统，方便用户朋友们下载及安装，让更多用户能体现到原生的操作系统。
             </div>
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
+            <hr/>
             <div class="title">[ 初衷 ]</div>
             <div class="instructions">
                 一位小白用户好不容易在搜索引擎上找到一个原版系统下载网站，却看不懂里面英文名称，更不知道选择下载那个版本；当他辛辛苦苦下载完，并研究了半天如何安装时，又被流氓工具/PE欺骗捆绑了不明软件、锁定了不明主页。<br />
                 所以，我们倾心打造了“MSDN镜像库”，一个小白也能快速找到合适自己镜像下载与安装的网站，我们的初衷就是希望每一位有需要的用户都能以最简单快速方式获取到纯净与安全的Windows或Office，以更高效的完成此项工作。
             </div>
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
+            <hr/>
             <div class="title">[ 特色 ]</div>
             <div class="text">
                 纯粹——仅提供原版系统和Office
@@ -68,22 +60,20 @@
             <div class="text">
                 舒心——网站无需登录，适配移动端访问
             </div>
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
+            <hr/>
             <div class="title">[ 联系与帮助 ]</div>
             <div class="text">
-                <a href="https://github.com/lopins/msdn-images/issues">社区交流</a>
+                社区交流：<a href="https://github.com/lopins/msdn-images/issues" target="_blank">lopins/msdn-images</a>
             </div>
             <div class="text">
                 联系邮箱：<a href="mailto:lopins@qq.com" target="_blank">lopins@qq.com</a>
             </div>
+            <!--
             <div class="text">
                 微信公众号
             </div>
             <img src="https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=https://u.wechat.com/MNc8vfMgE0m7Ug732Un4kGA?s=2" style="width: 220px;" />
+            -->
             <!-- 其他安装方法
 		<div class="step">
 		∨ 其他安装方法
@@ -92,16 +82,8 @@
 		<br>
 		<a href="">PE安装方法 〉</a>
 		-->
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
+             <hr/>
+             <hr/>
             <!-- 下载应用
 		<div class="download_box">
 			<a href="" class="download" download>
@@ -113,10 +95,10 @@
         </div>
         -->
         </div>
-        <div class="foot">
+        <!-- <div class="foot">
             <p><a href="/"><img src="https://cdn.jsdelivr.net/gh/lopins/msdn-images@main/docs/images/logo1.png"></a></p>
             <p class="download_desc">微软官方原版镜像仓库</p>
-        </div>
+        </div> -->
     </div>
     <div class="return_top">
         <a class="home" href="/" title="主页"> </a>

diff --git a/docs/css/about.css b/docs/css/about.css
@@ -1,7 +1,20 @@
-.article_box{
-	margin: 120px auto 0;
-	width: 760px;
-	font-size: 16px;    border: 1px solid #f5f5f5; padding: 20px;
+/* 基本样式 */
+.article_box {
+	margin: 0 auto;
+    overflow: auto;
+    width: 100%;
+    max-width: 760px;
+    font-size: 16px;
+    border: 1px solid #f5f5f5;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+/* 手机端样式 */
+@media (max-width: 768px) {
+    .article_box {
+        max-height: calc(100vh - 40px);
+    }
 }
 .title{
 	color: #2b2b2b;

diff --git a/docs/css/images.css b/docs/css/images.css
@@ -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;
@@ -281,39 +285,22 @@ 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;
-    height: 85px;
-    line-height: 85px;
-    /*height: 85px;*/
-    /*line-height: 85px;*/
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
     border: 1px solid #e1e1e1;
     text-align: center;
     color: #b2b2b2;
@@ -323,12 +310,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;

diff --git a/docs/css/windows.css b/docs/css/windows.css
@@ -14,15 +14,21 @@
 }
 .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%;}
+}
+@media screen and (max-width: 640px) {
+	.download_content{margin: 0 auto;width: 95%;}
+}
+
 .left{
 	background: #14cc70;
-	display: table;
+	/* display: table; */
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -35,7 +41,7 @@
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	left: 50%;
+	/* left: 50%; */
 	right: 0;
 }
 .show_box{
@@ -66,8 +72,12 @@
 .version_box{
 	display: table-cell;
 	vertical-align: middle;
-	padding-left: 100px;
   	box-sizing: border-box;
+	margin: 0 auto;
+	width: 90%;
+}
+.version_box .choose,.version_box .tip_title,.version_box .down_btn{
+	text-align: center;
 }
 .form_group{
 	margin: 40px 0;
@@ -230,11 +240,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{
@@ -247,19 +258,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{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;
@@ -276,17 +291,24 @@
 	left: -80px;
 }
 .version_content{
-	height: calc(100% - 170px);
+	height: calc(100% - 50px);
 	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;}

diff --git a/docs/index.html b/docs/index.html
@@ -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>

diff --git a/docs/office.html b/docs/office.html
@@ -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>

diff --git a/docs/windows.html b/docs/windows.html
@@ -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>