整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

terraform providers 国内不容易那

terraform providers 国内不容易那
  • ecord successfully
  • ? create-buckets export|grep terraform
  • 全局生效配置文件路径
  • cat /Users/lex/.terraform.d/.terraformrc
  • hosts
  • tree for terraform directory
  • providers
  • terraform init
  • reference
  • terraform Main commands:

record successfully

? create-buckets export|grep terraform

  • TFCLICONFIG_FILE=/Users/lex/.terraform.d/.terraformrc
  • 配置文件.terraformrc
  • TFPLUGINCACHE_DIR=/Users/lex/.terraform.d/terraform-plugin-cache
  • 创建缓存目录

全局生效配置文件路径

  • 全局生效配置文件路径 export TF_CLI_CONFIG_FILE=$HOME/.terraform.d/.terraformrc export TF_PLUGIN_CACHE_DIR="$HOME/.terraform.d/terraform-plugin-cache"

cat /Users/lex/.terraform.d/.terraformrc

plugin_cache_dir="$HOME/.terraform.d/terraform-plugin-cache"
disable_checkpoint=true

hosts

  • ping 151.101.86.49 registry.terraform.io

tree for terraform directory

?  .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

providers

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

terraform init

?  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.

reference

  • golang.org被屏蔽了,直接访问不了,解决办法如下:在 http://ping.eu/ping/ 上ping一下golang.org
  • https://cloud.tencent.com/developer/ask/sof/1470987/answer/2013800
  • https://stackoverflow.com/questions/66281882/how-can-i-get-terraform-init-to-run-on-my-apple-silicon-macbook-pro-for-the-go
  • https://www.elephdev.com/Terraform/414.html

terraform Main commands:

  • [ ] init Prepare your working directory for other commands
  • [ ] validate Check whether the configuration is valid
  • [ ] plan Show changes required by the current configuration//terraform plan -var-file=env_vars/dev.hk.tfvars
  • [ ] apply Create or update infrastructure
  • [ ] destroy Destroy previously-created infrastructure

者:小不点啊

来源:www.cnblogs.com/leeSmall/p/9356535.html

一、Nginx Rewrite 规则


1. Nginx rewrite规则


Rewrite规则含义就是某个URL重写成特定的URL(类似于Redirect),从某种意义上说为了美观或者对搜索引擎友好,提高收录量及排名等。


语法:


rewrite <regex> <replacement> [flag]
关键字 || 正则 || 替代内容 || flag标记


Rewrite规则的flag标记主要有以下几种:


  • last :相当于Apache里的(L)标记,表示完成rewrite;
  • break:本条规则匹配完成后,终止匹配,不再匹配后面的规则
  • redirect:返回302临时重定向,浏览器地址会显示跳转后的URL地址
  • permanent:返回301永久重定向,浏览器地址栏会显示跳转后的URL地址


last和break用来实现URL重写,浏览器地址栏URL地址不变


2. Nginx rewrite例子


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标记


说明:


  • rewrite为固定关键字,表示开始进行rewrite匹配规则、
  • regex部分是 ^/(.*) ,这是一个正则表达式,匹配完整的域名和后面的路径地址
  • replacement部分是http://www.dbspread.com/,是取自regex部分( )里的内容。匹配成功后跳转到的URL。
  • flag部分 permanent表示永久301重定向标记,即跳转到新的 http://www.dbspread.com/ 地址上



二、Nginx 防盗链


1. 什么是防盗链


比如http://www.dbspread.com/download/av123.rmvb 这个视频下载地址被其他网站引用,比如在www.test.com的index.html引用download/av123.rmvb就叫盗链,我们要禁止这种引用就叫做防盗链



2. 怎么实现防盗链


在nginx的nginx.conf的server里面配置如下代码


三、Nginx 动静分离

1. 动静分离是什么

Nginx动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思路。

2. 动静分离原理图

3. Nginx动静分离应该注意的地方

1). WEB项目开发时要注意,将静态资源尽量放在一个static文件夹2). 将static静态资源文件夹放到Nginx可以取到的位置3). 页面要建立全局变量路径,方便修改路径4). 修改nginx.conf的location, 匹配静态资源请求

4. Nginx动静分离步骤

4.1 准备一个静态资源button.css

body {
    margin: 10px 20px;
    text-align: center;
    font-family: Arial, sans-serif;
    background-color: red;
}

4.2 在/var/local下新建一个static文件夹用来存放静态资源button.css

4.3 在tomcat-8080/webapps/ROOT下的index.html里面引入button.css


4.4 在nginx的nginx.conf中server节点新增静态资源分离的配置


对于Nginx基础配置,推荐之前的:后端实践:Nginx日志配置(超详细)

4.5 访问页面查看效果

四、Nginx+keepalived 实现高可用

1. keepalived是什么

Keepalived软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP (Virtual Router Redundancy Protocol ,虚拟路由器冗余协议)功能。因此,Keepalived除了能够管理LVS软件外,还可以作为其他服务(例如:Nginx、Haproxy、MySQL等)的高可用解决方案软件

2. keepalived主要功能

管理LVS负载均衡软件实现LVS集群节点的健康检查作为系统网络服务的高可用性(failover)

3. keepalived故障转移

Keepalived高可用服务之间的故障切换转移,是通过 VRRP 来实现的。在 Keepalived服务正常工作时,主 Master节点会不断地向备节点发送(多播的方式)心跳消息,用以告诉备Backup节点自己还活着,当主 Master节点发生故障时,就无法发送心跳消息,备节点也就因此无法继续检测到来自主 Master节点的心跳了,于是调用自身的接管程序,接管主Master节点的 IP资源及服务。而当主 Master节点恢复时,备Backup节点又会释放主节点故障时自身接管的IP资源及服务,恢复到原来的备用角色。

说明:keepalived的主从切换和redis的主从切换是不一样的,keepalived的主节点挂了以后,从节点变为主节点,之前的主节点恢复以后继续做主节点。redis的主节点挂了以后,重新恢复以后变为从节点

4. keepalived高可用架构示意图

说明:

虚拟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

5. keepalived安装

环境准备:

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的文章

5.1 安装keepalived的步骤:

注: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.2 修改keepalived主节点192.168.152.130的/etc/keepalived/keepalived.conf配置文件


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
fi


5.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域名访问

5.9 下面我们停掉主节点192.168.152.130的keepalived和nginx

可以看到从节点变为主节点了

在浏览器输入地址www.dpspread.com访问,可以看到访问正常

5.10 下面我们重新启动主节点192.168.152.130

可以看到主节点重新启动以后变为主节点了

之前变为主节点的从节点又变回从节点了

到此keepalived+nginx的高可用完美完成

:移动端准备工作

<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]-->

二:pc端准备工作

<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]-->

三:base.css公共样式pc端

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; }  

四:base.css公共样式移动端

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%;  

}  

五:移动端布局使用方法rem

第一种:js控制html字体大小, js代码放在head里面

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';
    }
}


第二种:js控制html字体大小常用 ,js代码放在head里面

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字体大小

一:字体大小为15px开始 常用

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
    }

}

二:字体大小为13.65px 不常用

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和自动缩放

新旧版本兼容:这里设置flex容器为.box,子元素为.item

1、Flex 布局

.box {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
}

旧版:display:box

新版:display:flex

2、定义主轴的方向

水平方向:

.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:主轴为垂直方向,起点在下沿。

3、子元素主轴对齐方式

.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:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

4、子元素交叉轴对齐方式

.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,将占满整个容器的高度。

5、子元素属性:子元素在水平或者垂直方向占几分

.item{ -moz-flex: 1;
      -webkit-flex: 1; flex: 1; 
      -webkit-box-flex: 1.0;}

旧版:box-flex:1.0浮点数字

新版:flex:1 数字

6、超出要不要换行 不兼容,就是兼容了也无效

要求换行

.box{ flex-wrap:wrap; box-lines: multiple; }

旧版: box-lines: single默认不允许 | multiple 允许;

新版:flex-wrap: nowrap 不换行

wrap 换行,第一行在上方

wrap-reverse 换行,第一行在下方

7.新版的其他语法

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,将占满整个容器的高度。


8、兼容无效:

justify-content: space-around 不能用

flex-wrap: wrap 不能用

9、flex兼容的标准写法

-webkit-前缀标准版-moz-前缀标准版标准版-webkit-前缀09版

示例:

.box {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
}

10、新版的语法:

定义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