- 屏幕分类
- 超小屏幕 （移动设备） w<768px
- 小屏设备 768px-992px 768 <= w <992
- 中等屏幕 992px-1200px 992 =< w <1200
- 宽屏设备 1200px以上 w>=1200
npm install sass-loader node-sass --save
注意：<style scoped lang="scss">
<style scoped lang="scss">
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
</style>
Eg:
注意：and 后面有空格
<style>
.container{
width:1200px;
margin: 0 auto;
height:1200px;
background-color: red;
}
/*iphone: w < 768px*/
@media screen and (max-width: 768px){
.container{
width:100%;
background-color: green;
}
}
/*pad: w >= 768 && w< 992*/
@media screen and (max-width: 992px) and (min-width: 768px) {
.container{
width:750px;
background-color: blue;
}
}
/*中等屏幕 w >= 992 && w<1200*/
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container{
width:970px;
background-color: yellow;
}
}
</style>
- 布局
<style scoped lang="scss”>
</style>
- 响应式布局
/*1500px和1640px之间*/
@media only screen and (min-width: 1500px) and (max-width: 1640px) {
/*样式布局*/
}
/*小于750px*/
@media screen and (max-width: 750px) {
}
- 宽度使用百分比
#head { width: 100% }
#content { width: 50%; }
- 图片处理
img { width: auto; max-width: 100%; }
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
