html5屏幕适配

 

 

 

 

 

1、使用meta标签：viewport

viewport标签极其属性：

每个属性的详细介绍：

属性名                          取值                                                     描述
width                      正整数 或 device-width                            定义视口的宽度，单位为像素
height                    正整数 或 device-height                           定义视口的高度，单位为像素，一般不用
initial-scale            [0.0-10.0]                                                   定义初始缩放值
minimum-scale     [0.0-10.0]                                                   定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale     [0.0-10.0]                                                  定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable          yes/no                                                      定义是否允许用户手动缩放页面，默认值yes
 

2、使用css3单位rem

 

 

3、使用媒体查询

媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。

媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
 

 

 

 

 

 

 

 

 

 

 

 

 

1，使用淘宝的适配方式

2，引入scss文件，下载buy

 

gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

发现依然报错无法安装。。。

最终解决方案是，把https换成http：

gem sources --add http://gems.ruby-china.org/ --remove https://rubygems.org/