diff --git a/index.css b/index.css index 4beca78..7824666 100644 --- a/index.css +++ b/index.css @@ -63,6 +63,12 @@ body { display: inline-block; transition: 0.3s; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .wrapper .actionBtn { + font-size: 20px; + padding: 10px 20px; + } +} .wrapper .actionBtn:hover { background: #326eeb; color: #f9f9f9; @@ -71,6 +77,11 @@ body { width: 100%; min-width: 890px; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .wrapper > div { + min-width: 100%; + } +} .brief { height: 300px; text-align: center; @@ -81,6 +92,7 @@ body { .brief .slogan { font-size: 16px; color: #5a5a5a; + padding: 0 20px; } .feature { background: #dedede; @@ -89,6 +101,11 @@ body { width: 1200px; margin: 0 auto; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .feature .featureContent { + width: 100%; + } +} .feature .featureContent .item { padding: 30px 0 20px; width: 280px; @@ -125,6 +142,25 @@ body { font-size: 14px; line-height: 20px; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .feature .featureContent .item { + padding: 20px 0; + float: none; + margin: 0 auto; + font-size: 24px; + } + .feature .featureContent .iconWrapper { + font-size: 25px; + line-height: 25px; + } + .feature .featureContent .iconWrapper .bigger { + font-size: 30px; + } + .feature .featureContent h4 { + font-size: 16px; + margin: 4px; + } +} .quickstart { background: #f9f9f9; } @@ -136,6 +172,11 @@ body { right: 0; bottom: 0; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .quickstart .screenshot { + display: none; + } +} .quickstart code.simpleBash { font-family: monospace; font-weight: bold; @@ -146,9 +187,19 @@ body { width: 890px; margin: 0 auto; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .listSection .listContent { + width: 100%; + } +} .listSection ul { margin: 0 auto; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .listSection ul { + padding: 0 20px 0 30px; + } +} .listSection li { color: #5a5a5a; font-size: 16px; @@ -161,6 +212,11 @@ body { width: 890px; margin: 0 auto; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .sample .sampleContent { + width: 100%; + } +} .sample .item { margin: 10px; } @@ -169,6 +225,11 @@ body { margin: 0px 10px; color: #5a5a5a; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .sample .itemTitle { + margin: 0; + } +} .sample .figure { vertical-align: top; } @@ -177,9 +238,22 @@ body { display: inline-block; vertical-align: top; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .sample pre { + width: 100%; + } +} .sample code { width: 495px; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .sample code { + width: 100%; + margin: 0 auto; + word-wrap: break-word; + padding: 0; + } +} .sample hr { border: none; border-top: 1px solid #777777; @@ -201,6 +275,11 @@ body { position: relative; padding: 120px 0; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + .learnMore { + padding: 70px 0; + } +} .learnMore h4.subtitle { padding: 0; margin-bottom: 30px; diff --git a/index.html b/index.html index 38371c2..aadffe5 100644 --- a/index.html +++ b/index.html @@ -1,86 +1,88 @@ - AnyProxy - - + AnyProxy + + + + -
- View on Github
+
+ View on Github
-
- -

AnyProxy是一个开放式的HTTP/HTTPS代理，你可以灵活控制各种网络数据

-
-     - -
-
+
+ +

AnyProxy是一个开放式的HTTP/HTTPS代理，你可以灵活控制各种网络数据

+
+     + +
+
-
-
-
- - - -

基于Node.js

-
全程JavaScript，学习无压力
-
-
- - - -

支持Https

-
明文解析Https请求数据
如何配置>>
-
-
- - - -

Web界面

-
多终端共享，可视化观察每个请求
-
-
- - - -

规则逻辑（Rule）

-
编写个性化处理规则，定制专属调试工具
-
-
-
-
+
+
+
+ + + +

基于Node.js

+
全程JavaScript，学习无压力
+
+
+ + + +

支持Https

+
明文解析Https请求数据
如何配置>>
+
+
+ + + +

Web界面

+
多终端共享，可视化观察每个请求
+
+
+ + + +

规则逻辑（Rule）

+
编写个性化处理规则，定制专属调试工具
+
+
+
+
-
-
-

安装

-
    -
  • 安装 Node.js >= v0.12
    • -
  • npm install -g anyproxy, 可能需要sudo
    • -
  • More>>
    • -
-

使用

-
    -
  • 运行  anyproxy
    • -
  • 把浏览器http代理指向 127.0.0.1:8001
    • -
  • 访问界面：http://127.0.0.1:8002
    • -
  • 更多用法>>
    • -
- -
-
+
+
+

安装

+
    +
  • 安装 Node.js >= v0.12
    • +
  • npm install -g anyproxy, 可能需要sudo
    • +
  • More>>
    • +
+

使用

+
    +
  • 运行  anyproxy
    • +
  • 把浏览器http代理指向 127.0.0.1:8001
    • +
  • 访问界面：http://127.0.0.1:8002
    • +
  • 更多用法>>
    • +
+ +
+
-
+
-
-

规则文件(rule)样例

+
+

规则文件(rule)样例

-
-
在HTML响应末尾加上"hello world"
- 
+                

+                    
在HTML响应末尾加上"hello world"

+                    
 
 //append "hello world" to all web pages
 //file : rule_replace_response_data.js
@@ -96,15 +98,15 @@ module.exports = {
     }
 };
 
-					

-					
-						
-					
-					

-				
				
-				

-					
去除请求头的if-modified-since字段

-					
+                    

+                    
+                        
+                    
+                    

+                
              
+                

+                    
去除请求头的if-modified-since字段

+                    
 
 //remove cache related header
 //file : rule_remove_cache_header.js
@@ -118,16 +120,16 @@ module.exports = {
     }
 };
 
-					

-					
-						
-					
-					

-				

+
+ + + +
+
-
-
为某个请求指定目标IP地址
- 
+                

+                    
为某个请求指定目标IP地址

+                    
 
 //assign a specific IP adress for some request
 //file : rule_reverse_proxy.js
@@ -144,16 +146,16 @@ module.exports = {
     }
 };
 
-					

-					
-						
-					
-					

-				

+
+ + + +
+
-
-
把所有图片响应替换成本地图片
- 
+                

+                    
把所有图片响应替换成本地图片

+                    
 
 //replace all the images with local one
 //file : rule_use_local_data.js
@@ -178,54 +180,54 @@ module.exports = {
     }
 };
 
-					

-					
-						
-					
-				

+
+ + + +
-
- >> 阅读：规则文件（Rule）API -
+
+ >> 阅读：规则文件（Rule）API +
-
-
+
+
-
-
-

其他特性

- -

相关阅读

- -
-
+
+
+

其他特性

+ +

相关阅读

+ +
+
-
-
-

Read More

- https://github.com/alibaba/anyproxy -
-
+
+
+

Read More

+ https://github.com/alibaba/anyproxy +
+
-
+
-
+
- - - + + + \ No newline at end of file diff --git a/index.less b/index.less index 50b59a4..7f2133b 100644 --- a/index.less +++ b/index.less @@ -8,6 +8,9 @@ @wideContent : 1200px; @normalContent : 890px; +@wideContentMobile : 100%; +@normalContentMobile : 100%; + @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/ @@ -85,6 +88,14 @@ body{ border-radius: 30px; display: inline-block; transition:0.3s; + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + font-size:20px; + padding: 10px 20px; + } } .actionBtn:hover{ @@ -96,8 +107,17 @@ body{ .wrapper>div{ width: 100%; min-width: @normalContent; + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + min-width: @normalContentMobile; + } } + + .brief{ height: 300px; text-align: center; @@ -108,6 +128,7 @@ body{ .slogan{ font-size: 16px; color: @textDark; + padding: 0 20px; } } @@ -115,6 +136,13 @@ body{ background: @darkGray; .featureContent{ + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + width: @wideContentMobile; + } + width: @wideContent; margin: 0 auto; @@ -158,6 +186,34 @@ body{ font-size: 14px; line-height: 20px; } + + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + .item{ + padding: 20px 0; + float :none; + margin : 0 auto; + font-size : 24px; + } + + .iconWrapper{ + font-size: 25px; + line-height: 25px; + } + + .iconWrapper .bigger{ + font-size: 30px; + } + + h4{ + font-size: 16px; + margin: 4px; + } + + } } } @@ -172,6 +228,13 @@ body{ position: absolute; right: 0; bottom: 0; + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + display : none; + } } code.simpleBash{ @@ -184,12 +247,27 @@ body{ .listSection{ .listContent{ + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + width: @normalContentMobile; + } + width: @normalContent; margin: 0 auto; } ul{ margin: 0 auto; + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + padding: 0 20px 0 30px; + } } li{ @@ -202,6 +280,14 @@ body{ .sample{ background: @gray; .sampleContent{ + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + width: @normalContentMobile; + } + width: @normalContent; margin: 0 auto; } @@ -215,6 +301,13 @@ body{ font-size: 16px; margin: 0px 10px; color: @textDark; + + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + margin :0; + } } .figure{ @@ -225,10 +318,25 @@ body{ margin: 0; display: inline-block; vertical-align: top; + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + width: 100%; + } } code{ width: 495px; + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + width:100%; + margin: 0 auto; + word-wrap: break-word; + padding: 0; + } } hr{ @@ -255,6 +363,12 @@ body{ text-align: center; position: relative; padding: 120px 0; + @media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2){ + padding: 70px 0; + } h4.subtitle{ padding: 0;