整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
plugin_cache_dir="$HOME/.terraform.d/terraform-plugin-cache"
disable_checkpoint=true
? .terraform.d pwd
/Users/lex/.terraform.d
? .terraform.d tree
.
├── checkpoint_cache
├── checkpoint_signature
└── terraform-plugin-cache
└── registry.terraform.io
└── hashicorp
└── google
└── 4.45.0
├── darwin_amd64
│ └── terraform-provider-google_v4.45.0_x5
├── terraform-provider-google
│ └── darwin_amd64 [no using]
└── terraform-provider-google_4.45.0_darwin_amd64.zip
7 directories, 5 files
? terraform-provider-google tree
.
└── darwin_amd64
0 directories, 1 file
? terraform-provider-google file darwin_amd64
darwin_amd64: Mach-O 64-bit executable x86_64
terraform-provider-google darwin_amd64
-- Hashicorp服務器下載插件 手動下載
- https://releases.hashicorp.com/terraform-provider-google/3.35.0/
- https://releases.hashicorp.com/terraform-provider-google/4.45.0/terraform-provider-google_4.45.0_darwin_amd64.zip
? terraform-provider-google pwd
/Users/lex/.terraform.d/terraform-plugin-cache/registry.terraform.io/hashicorp/google/4.45.0/terraform-provider-google
? terraform-provider-google tree
.
└── darwin_amd64
0 directories, 1 file
? create-buckets terraform init
Initializing modules...
Initializing the backend...
Initializing provider plugins...
- Finding latest version of hashicorp/google...
- Installing hashicorp/google v4.45.0...
- Installed hashicorp/google v4.45.0 (signed by HashiCorp)
Terraform has created a lock file .terraform.lock.hcl to record the provider
selections it made above. Include this file in your version control repository
so that Terraform can guarantee to make the same selections by default when
you run "terraform init" in the future.
Terraform has been successfully initialized!
You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.
If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your working directory. If you forget, other
commands will detect it and remind you to do so if necessary.
者：小不點啊
來源：www.cnblogs.com/leeSmall/p/9356535.html
一、Nginx Rewrite 規則
Rewrite規則含義就是某個URL重寫成特定的URL（類似于Redirect），從某種意義上說為了美觀或者對搜索引擎友好，提高收錄量及排名等。
語法：
rewrite <regex> <replacement> [flag]
關鍵字 || 正則 || 替代內容 || flag標記
Rewrite規則的flag標記主要有以下幾種：
last和break用來實現URL重寫，瀏覽器地址欄URL地址不變
a) 例如用戶訪問www.dbspread.com，想直接跳轉到網站下面的某個頁面，www.dbspread.com/new.index.html如何來實現呢？我們可以使用Nginx Rewrite 來實現這個需求，具體如下：在server中加入如下語句即可：
效果圖如下：
rewrite ^/$ http://www.dbspread.com/new.index.html permanent;
對應如下語法：
rewrite <regex> <replacement> [flag];
關鍵字 正則 替代內容 flag標記正則表達式說明：
*代表前面0或更多個字符 +代表前面1或更多個字符
？代表前面0或1個字符 ^代表字符串的開始位置
$代表字符串結束的位置 。為通配符，代表任何字符b)例如多個域名跳轉到同一個域名，nginx rewrite規則寫法如下：
格式：
rewrite <regex> <replacement> [flag];
關鍵字 || 正則 || 替代內容 || flag標記
說明：
比如http://www.dbspread.com/download/av123.rmvb 這個視頻下載地址被其他網站引用，比如在www.test.com的index.html引用download/av123.rmvb就叫盜鏈，我們要禁止這種引用就叫做防盜鏈
在nginx的nginx.conf的server里面配置如下代碼
三、Nginx 動靜分離
Nginx動靜分離是讓動態網站里的動態網頁根據一定規則把不變的資源和經常變的資源區分開來，動靜資源做好了拆分以后，我們就可以根據靜態資源的特點將其做緩存操作，這就是網站靜態化處理的核心思路。
1). WEB項目開發時要注意，將靜態資源盡量放在一個static文件夾2). 將static靜態資源文件夾放到Nginx可以取到的位置3). 頁面要建立全局變量路徑，方便修改路徑4). 修改nginx.conf的location， 匹配靜態資源請求
body {
margin: 10px 20px;
text-align: center;
font-family: Arial, sans-serif;
background-color: red;
}4.4 在nginx的nginx.conf中server節點新增靜態資源分離的配置
對于Nginx基礎配置，推薦之前的：后端實踐：Nginx日志配置（超詳細）
4.5 訪問頁面查看效果
Keepalived軟件起初是專為LVS負載均衡軟件設計的，用來管理并監控LVS集群系統中各個服務節點的狀態，后來又加入了可以實現高可用的VRRP (Virtual Router Redundancy Protocol ,虛擬路由器冗余協議）功能。因此，Keepalived除了能夠管理LVS軟件外，還可以作為其他服務（例如：Nginx、Haproxy、MySQL等）的高可用解決方案軟件
管理LVS負載均衡軟件實現LVS集群節點的健康檢查作為系統網絡服務的高可用性（failover）
Keepalived高可用服務之間的故障切換轉移，是通過 VRRP 來實現的。在 Keepalived服務正常工作時，主 Master節點會不斷地向備節點發送（多播的方式）心跳消息，用以告訴備Backup節點自己還活著，當主 Master節點發生故障時，就無法發送心跳消息，備節點也就因此無法繼續檢測到來自主 Master節點的心跳了，于是調用自身的接管程序，接管主Master節點的 IP資源及服務。而當主 Master節點恢復時，備Backup節點又會釋放主節點故障時自身接管的IP資源及服務，恢復到原來的備用角色。
說明：keepalived的主從切換和redis的主從切換是不一樣的，keepalived的主節點掛了以后，從節點變為主節點，之前的主節點恢復以后繼續做主節點。redis的主節點掛了以后，重新恢復以后變為從節點
說明：
虛擬ip(VIP):192.168.152.200，對外提供服務的ip，也可稱作浮動ip192.168.152.130：nginx + keepalived master 主192.168.152.129：nginx + keepalived backup 從192.168.152.129：tomcat-8080192.168.152.129：tomcat-8081
環境準備：
centos6、jdk
虛擬ip(VIP):192.168.152.200，對外提供服務的ip，也可稱作浮動ip
192.168.152.130：nginx + keepalived master 主
192.168.152.129：nginx + keepalived backup 從
192.168.152.129：tomcat-8080
192.168.152.129：tomcat-8081
nginx和tomcat的環境準備請查看我的前一篇關于nginx的文章
注：192.168.152.129（keepalived從節點） 與 192.168.152.130（keepalived主節點）先安裝好nginx + keepalived
下載壓縮包：
wget www.keepalived.org/software/keepalived-1.3.5.tar.gz
解壓縮：
tar -zxvf keepalived-1.3.5.tar.gz
進入解壓縮以后的文件目錄：
cd keepalived-1.3.5
編譯安裝：./configure --prefix=/usr/local/keepalived系統提示警告 *** WARNING - this build will not support IPVS with IPv6. Please install libnl/libnl-3 dev libraries to support IPv6 with IPVS.yum -y install libnl libnl-devel再次執行./configure --prefix=/usr/local/keepalived系統提示錯誤 configure: error: libnfnetlink headers missingyum install -y libnfnetlink-devel再次執行./configure --prefix=/usr/local/keepalived
make && make install
到此keepalived安裝完成，但是接下來還有最關鍵的一步，如果這一步沒有做后面啟動keepalived的時候會報找不到配置文件的錯誤
Configuration file '/etc/keepalived/keepalived.conf' is not a regular non-executable file
安裝完成后，進入安裝目錄的etc目錄下，將keepalived相應的配置文件拷貝到系統相應的目錄當中。keepalived啟動時會從/etc/keepalived目錄下查找keepalived.conf配置文件
mkdir /etc/keepalived
cp /usr/local/keepalived/etc/keepalived/keepalived.conf /etc/keepalived
5.3 修改keepalived從節點192.168.152.129的/etc/keepalived/keepalived.conf配置文件
5.4 檢查nginx是否啟動的shell腳本
/usr/local/src/check_nginx_pid.sh
#!/bin/bash
#檢測nginx是否啟動了
A=`ps -C nginx --no-header |wc -l`
if [ $A -eq 0 ];then #如果nginx沒有啟動就啟動nginx
/usr/local/nginx/sbin/nginx #重啟nginx
if [ `ps -C nginx --no-header |wc -l` -eq 0 ];then #nginx重啟失敗，則停掉keepalived服務，進行VIP轉移
killall keepalived
fi
fi5.5 192.168.152.130（keepalived主節點）和 192.168.152.129（keepalived從節點）的nginx的配置文件nginx.conf
user root root; #使用什么用戶啟動NGINX 在運行時使用哪個用戶哪個組
worker_processes 4; #啟動進程數，一般是1或8個，根據你的電腦CPU數，一般8個
worker_cpu_affinity 00000001 00000010 00000100 00001000; #CPU邏輯數——把每個進程分別綁在CPU上面，為每個進程分配一個CPU
#pid /usr/local/nginx/logs/nginx.pid
worker_rlimit_nofile 102400; #一個進程打開的最大文件數目，與NGINX并發連接有關系
#工作模式及連接數上限
events
{
use epoll; #多路復用IO 基于LINUX2.6以上內核，可以大大提高NGINX的性能 uname -a查看內核版本號
worker_connections 102400; #單個worker process最大連接數,其中NGINX最大連接數＝連接數*進程數,一般1GB內存的機器上可以打開的最大數大約是10萬左右
multi_accept on; #盡可能多的接受請求，默認是關閉狀態
}
#處理http請求的一個應用配置段
http
{
#引用mime.types,這個類型定義了很多，當web服務器收到靜態的資源文件請求時，依據請求文件的后綴名在服務器的MIME配置文件中找到對應的MIME #Type，根據MIMETYPE設置并response響應類型（Content-type）
include mime.types;
default_type application/octet-stream; #定義的數據流，有的時候默認類型可以指定為text,這跟我們的網頁發布還是資源下載是有關系的
fastcgi_intercept_errors on; #表示接收fastcgi輸出的http 1.0 response code
charset utf-8;
server_names_hash_bucket_size 128; #保存服務器名字的hash表
#用來緩存請求頭信息的，容量4K，如果header頭信息請求超過了，nginx會直接返回400錯誤，先根據client_header_buffer_size配置的值分配一個buffer，如果##分配的buffer無法容納request_line/request_header，那么就會##再次根據large_client_header_buffers配置的參數分配large_buffer，如果large_buffer還是無#法容納，那么就會返回414（處理request_line）/400（處理request_header）錯誤。
client_header_buffer_size 4k;
large_client_header_buffers 4 32k;
client_max_body_size 300m; #允許客戶端請求的最大單文件字節數 上傳文件時根據需求設置這個參數
#指定NGINX是否調用這個函數來輸出文件，對于普通的文件我們必須設置為ON，如果NGINX專門做為一個下載端的話可以關掉，好處是降低磁盤與網絡的IO處理數及#系統的UPTIME
sendfile on;
#autoindex on;開啟目錄列表訪問，適合下載服務器
tcp_nopush on; #防止網絡阻塞
#非常重要，根據實際情況設置值，超時時間，客戶端到服務端的連接持續有效時間，60秒內可避免重新建立連接，時間也不能設太長，太長的話，若請求數10000##，都占用連接會把服務托死
keepalive_timeout 60;
tcp_nodelay on; #提高數據的實時響應性
client_body_buffer_size 512k; #緩沖區代理緩沖用戶端請求的最大字節數（請求多）
proxy_connect_timeout 5; #nginx跟后端服務器連接超時時間（代理連接超時）
proxy_read_timeout 60; #連接成功后，后端服務器響應時間(代理接收超時)
proxy_send_timeout 5; #后端服務器數據回傳時間(代理發送超時)
proxy_buffer_size 16k; #設置代理服務器（nginx）保存用戶頭信息的緩沖區大小
proxy_buffers 4 64k; #proxy_buffers緩沖區，網頁平均在32k以下的話，這樣設置
proxy_busy_buffers_size 128k; #高負荷下緩沖大小
proxy_temp_file_write_size 128k; #設定緩存文件夾大小，大于這個值，將從upstream服務器傳
gzip on; #NGINX可以壓縮靜態資源，比如我的靜態資源有10M，壓縮后只有2M，那么瀏覽器下載的就少了
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2; #壓縮級別大小,最小1,最大9.值越小,壓縮后比例越小,CPU處理更快,為1時,原10M壓縮完后8M,但設為9時,壓縮完可能只有2M了。一般設置為2
gzip_types text/plain application/x-javascript text/css application/xml; #壓縮類型:text,js css xml 都會被壓縮
gzip_vary on; #作用是在http響應中增加一行目的是改變反向代理服務器的緩存策略
#日志格式
log_format main '$remote_addr - $remote_user [$time_local] "$request" ' #ip 遠程用戶 當地時間 請求URL
'$status $body_bytes_sent "$http_referer" ' #狀態 發送的大小 響應的頭
'"$http_user_agent" $request_time'; #客戶端使用的瀏覽器 頁面響應的時間
#動態轉發
upstream web1 {
#每個請求按訪問ip的hash結果分配,這樣每個訪客固定訪問一個后端服務器,可以解決session的問題。配置了ip_hash就沒有負載均衡的效果了，每次訪問的都是同一個tomcat
#ip_hash;
#轉發的后端的tomcat服務器,weight表示轉發的權重,越大轉發的次數越多,機器性能不一樣配置的weight值不一樣
server 192.168.152.129:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.152.129:8081 weight=1 max_fails=2 fail_timeout=30s;
}
upstream web2 {
server 192.168.152.129:8090 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.152.129:8091 weight=1 max_fails=2 fail_timeout=30s;
}
server {
listen 80; #監聽80端口
server_name www.dbspread.com; #域名
#rewrite規則
index index.jsp index.html index.htm;
root /usr/local/nginx/html; #定義服務器的默認網站根目錄位置
#重定向
if ($host != 'www.dbspread.com' ){
rewrite ^/(.*)$ http://www.dbspread.com/$1 permanent;
}
#防盜鏈
location ~* \.(rmvb|jpg|png|swf|flv)$ { #rmvb|jpg|png|swf|flv表示對rmvb|jpg|png|swf|flv后綴的文件實行防盜鏈
valid_referers none blocked www.dbspread.com; #表示對www.dbspread.com此域名開通白名單，比如在www.test.com的index.html引用download/av123.rmvb,無效
root html/b;
if ($invalid_referer) { #如果請求不是從www.dbspread.com白名單發出來的請求，直接重定向到403.html這個頁面或者返回403
#rewrite ^/ http://www.dbspread.com/403.html;
return 403;
}
}
#監聽完成以后通過斜桿(/)攔截請求轉發到后端的tomcat服務器
location /
{
#如果后端的服務器返回502、504、執行超時等錯誤，自動將請求轉發到upstream負載均衡池中的另一臺服務器，實現故障轉移。
proxy_next_upstream http_502 http_504 error timeout invalid_header;
proxy_set_header Host $host; #獲取客戶端的主機名存到變量Host里面,從而讓tomcat取到客戶端機器的信息
proxy_set_header X-Real-IP $remote_addr; #獲取客戶端的主機名存到變量X-Real-IP里面,從而讓tomcat取到客戶端機器的信息
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#rewrite ^/$ http://www.dbspread.com/new.index.html permanent;#用戶訪問www.dbspread.com，想直接跳轉到網站下面的某個頁面:www.dbspread.com/new.index.html
proxy_pass http://web1; #跳轉到對應的應用web1
}
# location ~ .*\.(php|jsp|cgi|shtml)?$ #動態分離 ~匹配 以.*結尾（以PHP JSP結尾走這段）
# {
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_pass http://jvm_web2;
# }
#靜態分離 ~匹配 以.*結尾（以html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css結尾走這段），當然不是越久越好，如果有10000個用戶在線，都保存幾個月，系統托跨
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
{
root /var/local/static; #靜態資源存放在nginx的安裝機器上
#proxy_pass http://www.static.com; #靜態資源也可存放在遠程服務器上
expires 30d;
}
#日志級別有[debug|info|notice|warn|error|crit] error_log 級別分為 debug, info, notice, warn, error, crit 默認為crit, 生產環境用error
#crit 記錄的日志最少,而debug記錄的日志最多
access_log /usr/local/logs/web2/access.log main;
error_log /usr/local/logs/web2/error.log crit;
}
}到這一步環境準備已完成，相關的配置也修改完成，下面我們來查看效果
5.6 配置hosts域名映射
192.168.152.200 www.dbspread.com注意：這里192.168.152.200 是keepalived里面virtual_ipaddress配置的虛擬ip
virtual_ipaddress {
192.168.152.200 # 定義虛擬ip(VIP)，可多設，每行一個
}到這一步環境準備已完成，相關的配置也修改完成，下面我們來查看效果
5.7 分別啟動192.168.152.129的兩個tomcat
5.8 分別啟動192.168.152.130（keepalived主節點）和
192.168.152.129（keepalived從節點）的keepalived的
啟動命令：
/usr/local/keepalived/sbin/keepalived
可以看到keepalived和nginx都啟動了
在瀏覽器輸入www.dpspread.com域名訪問
可以看到從節點變為主節點了
在瀏覽器輸入地址www.dpspread.com訪問，可以看到訪問正常
可以看到主節點重新啟動以后變為主節點了
之前變為主節點的從節點又變回從節點了
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!-- 設置在蘋果手機上以應用模式啟動時，是否全屏 -->
<meta name='apple-touch-fullscreen' content='yes'>
<!-- ios 系統 作用未知 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- iso 系統 作用未知 -->
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<!-- iso 系統 作用未知 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 是否識別 手機號碼、 電子郵件 地址 等-->
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<!-- 讓360雙核瀏覽器用webkit內核渲染頁面 -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
允許全屏模式瀏覽,隱藏瀏覽器導航欄--><meta name="apple-mobile-web-app-capable" content="yes" />
<!--微信緩存--> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!-- 讓360雙核瀏覽器用webkit內核渲染頁面 --> <meta name="renderer" content="webkit"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0；border: 0;}
ol,li,ul,dl,dt,dd{list-style:none;}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}
img {vertical-align: middle;border: none;width: 100%;} i {font: inherit;}
a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}
a:hover {text-decoration: underline; outline: none;}
select::-ms-expand { display: none; }
a:active,a:hover{outline:0}
.clearfix::before,.clearfix::after{ content: ''; display: block; height: 0; line-height: 0; visibility: hidden; clear: both;
}
.fl{ float:left;}.fr{float:right;}
input,select,option{vertical-align:middle;border-radius:0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}
input[type="text"],input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}
.overflow {overflow:hidden; }
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0}
ol,li,ul,dl,dt,dd{list-style:none;}.fl {float: left;} .fr {float: right;}
table{border-collapse:collapse;border-spacing:0}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解決IOS默認滑動很卡的情況 */
-webkit-overflow-scrolling : touch;
}
/* 禁止縮放表單 */
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
/* 取消鏈接高亮 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 設置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 圖片自適應 */
img {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
-ms-interpolation-mode: bicubic;/*為了照顧ie圖片縮放失真*/
}
em, i {
font-style: normal;
}
textarea {
resize:none; /*禁用了文本的拖拉，尤其在谷歌下*/
}
p {
word-wrap:break-word; /* 不夠的單詞自動換行 而不會被截掉 */
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
color: #fff;
font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
a:hover {
text-decoration: none; outline: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-family: 'Microsoft YaHei';
}
img {
border: none;
}
input{
font-family: 'Microsoft YaHei';
}
/*單行溢出*/
.one-txt-cut{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出 手機端使用*/
.txt-cut{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 2; */
-webkit-box-orient: vertical;
}
/* 移動端點擊a鏈接出現藍色背景問題解決 */
a:link,a:active,a:visited,a:hover {
background: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.overflow {overflow:hidden; }
.w50{
width: 50%;
}
.w25{
width: 25%;
}
.w20{
width: 20%;
}
.w33{
width: 33.333333%;
}
html設置初始font-size：320px的字體大小
var html=document.getElementsByTagName('html')[0];
if (html) {
var w=window.innerWidth;
var fontSize=(w > 640 ? 640 : w) / 640 * 30;
html.style.fontSize=fontSize + 'px';
}
window.onload=function () {
window.onresize=function () {
var w=window.innerWidth;
console.log(w);
var fontSize=(w > 640 ? 640 : w) / 640 * 30;
html.style.fontSize=fontSize + 'px';
}
}html設置初始font-size：320px的字體大小
(function (doc, win) {
var docEl=doc.documentElement;
var resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize';
var recalc=function () {
var clientWidth=docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize=(clientWidth > 640 ? 640 : clientWidth) / 320 * 20 + 'px';
}; // 不同瀏覽器resize事件處理機制不同 // 使用定時器延遲處理resize回調函數以降低重復響應
var recalcTimer=null;
var delaycalc=function () {
win.clearTimeout(recalcTimer);
recalcTimer=win.setTimeout(recalc, 100);
}; // 移動端不需要考慮事件注冊函數的兼容性
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, delaycalc, false); // DOMContentLoaded事件只在DOM文檔樹加載完畢觸發，此處不用延遲處理
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);html {
font-size: 15px
}
html {
font-size: 4.7vw;
/* rem(root element)配合vw(viewport width) */
}
@media only screen and (min-width:320PX) and (max-width:359PX) {
html {
font-size: 15px
}
}
@media only screen and (min-width:360PX) and (max-width:374PX) {
html {
font-size: 16.875px
}
}
@media only screen and (min-width:375PX) and (max-width:389PX) {
html {
font-size: 17.5781px
}
}
@media only screen and (min-width:390PX) and (max-width:400PX) {
html {
font-size: 18.75px
}
}
@media only screen and (min-width:401PX) and (max-width:414PX) {
html {
font-size: 19.4063px
}
}
@media only screen and (min-width:415PX) and (max-width:640PX) {
html {
font-size: 22.5px
}
}
@media screen and (min-width:641PX) {
html {
font-size: 30px
}
}
html {
font-size: 4.2vw;
/* rem(root element)配合vw(viewport width) */
}
html {
font-size: 13.65px
}
@media only screen and (min-width:320PX) and (max-width:360PX) {
html {
font-size: 13.65px
}
}
@media only screen and (min-width:360PX) and (max-width:375PX) {
html {
font-size: 15.36px
}
}
@media only screen and (min-width:375PX) and (max-width:390PX) {
html {
font-size: 16px
}
}
@media only screen and (min-width:390PX) and (max-width:414PX) {
html {
font-size: 16.64px
}
}
@media only screen and (min-width:414PX) and (max-width:460PX) {
html {
font-size: 17.664px
}
}
@media only screen and (min-width:460PX) and (max-width:640PX) {
html {
font-size: 20px
}
}
@media screen and (min-width:640PX) {
html {
font-size: 27.31px
}
}新舊版本兼容：這里設置flex容器為.box，子元素為.item
.box {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: -webkit-box;
display: -moz-box;
}舊版：display：box
新版：display：flex
水平方向：
.box {
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}.box {
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
}舊版：box-direction: normal 水平方向 | reverse 垂直方向 | inherit ，跟子元素的方向一致; 定義子元素的顯示方向。
box-orient: horizontal 水平排列| vertical 垂直排列| inline-axis 默認 | block-axis 快方式排列 | inherit繼承父元素; 定義子元素是否應水平或垂直排列。
這兩種要同時設置才能確定排列方式；
水平方向：box-direction: normal；box-orient: horizontal
垂直方向：box-direction: normal； box-orient:vertical
新版：flex-direction：row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
.box {
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: center;
}舊版： box-pack: start | end | center | justify;
注意：兼容寫法新版語法的space-around是不可用的
新版：justify-content：flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
.box {
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
}舊版： box-align: start | end | center | baseline | stretch;
新版：align-items：flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
.item{ -moz-flex: 1;
-webkit-flex: 1; flex: 1;
-webkit-box-flex: 1.0;}舊版：box-flex：1.0浮點數字
新版：flex：1 數字
要求換行
.box{ flex-wrap:wrap; box-lines: multiple; }舊版： box-lines: single默認不允許 | multiple 允許;
新版：flex-wrap: nowrap 不換行
wrap 換行，第一行在上方
wrap-reverse 換行，第一行在下方
01、行內元素也可以定義flex語法：不常用
.box{ display: -webkit-inline-flex; display: inline-flex;}：02、父元素屬性align-content屬性 定義在多跟抽線的對齊方式，一般是換行以后的對齊方式，只有一條抽線改屬性不生效，常用在換行以后有間距的問題：設置align-content：flex-start； 不常用
align-content：flex-start：與交叉軸的起點對齊。 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
03、子元素屬性flex，是flex-grow, flex-shrink 和 flex-basis的簡寫，一般只定義子元素占多少份，常用
04、子元素屬性flex-grow 定義子元素占一行的多少份，值為數字 不常用
05、子元素屬性flex-basis屬性 定義了在分配多余空間之前，項目占據的主軸空間 像素單位和百分比，默認auto
06、子元素屬性flex-shrink屬性 定義了子元素的縮小比例，如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值無效
07、 子元素屬性order屬性 定義子元素的排列方式，數值越小，越靠前排列，數字
08、子元素屬性align-self屬性 定義允許單個項目有與其他項目不一樣的對齊方式，會覆蓋algin-items屬性 不常用
align-self: auto 默認 表示繼承父元素
flex-start 與交叉軸的起點對齊。
flex-end 與交叉軸的終點對齊。
center 與交叉軸的中點對齊
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
justify-content: space-around 不能用
flex-wrap: wrap 不能用
-webkit-前綴標準版-moz-前綴標準版標準版-webkit-前綴09版示例：
.box {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: -webkit-box;
display: -moz-box;
}定義flex：
.box {
display: -webkit-flex;
/*webkit*/
display: flex;
}
/*行內flex*/
.box {
display: -webkit-inline-flex;
/*webkit*/
display: inline-flex;
}父元素屬性：
.box {
flex-direction: row | row-reverse | column | column-reverse;
/*主軸方向：左到右（默認） | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*換行：不換行（默認） | 換行 | 換行并第一行在下方*/
flex-flow: <flex-direction> || <flex-wrap>;
/*主軸方向和換行簡寫*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主軸對齊方式： 左對齊（默認） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對齊方式：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 上下平均分布*/
}子元素屬性：
.item {
order: <integer>;
number
/*排序：數值越小，越排前，默認為0*/
flex-grow: <number>;
/* default 0 */
/*放大：默認0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）*/
flex-shrink: <number>;
/* default 1 */
/*縮小：默認1（如果空間不足則會縮小，值為0不縮小）*/
flex-basis: <length> | auto;
/* default auto */
/*固定大小：默認為0，可以設置px值，也可以設置百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
/*flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto，*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*單獨對齊方式：自動（默認） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/
}原文鏈接：https://blog.csdn.net/xgb0610/article/details/80416024
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
