1、使用meta标签:viewport
viewport标签极其属性:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
每个属性的详细介绍:
属性名 取值 描述
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/