首页 建站知识 源码分享 素材下载 经验分享

CSS3响应式布局常见知识

发布时间:2019年08月11日 12:42:49

一般做响应式布局我们都会写三到四个以上的尺寸。

现在主流的分辨率都在1200以上,所以我们需要做一个1200分辨率以上的样式,min-width是最小1200像素宽度

@media all and (min-width: 1200px){
    body{
        background:#f00;
    }
}

然后我们需要继续写一个最大1200像素宽度的样式,也就是小于1200像素的样式

@media all and (max-width: 1200px){
    body{
        background:#f00;
    }
}

接下来我们就应该写平板的样式了,现在平板电脑的分辨率都比较高,有的已经是1920x1080了,所以我们一般写宽度为竖屏宽度。所以我们将平板尺寸定位最大1080像素。

@media all and (max-width: 1080px){
    body{
        background:#f00;
    }
}

最后我们就写手机端的尺寸了,一般我们会写小于800或者小于480。我个人喜欢写800;

@media all and (max-width: 800px){
    body{
        background:#f00;
    }
}


还有写法就是(意思是:意思就是在767px和979px之间的定义):

@media (min-width:767px)  and  (max-width:979px){
    body{
        background:#f00;
    }
}

当游览窗口小于767像素,则应用大括号中的CSS样式

@media (max-width:767px) {
    body{
        background:#f00;
    }
}


最后别忘记,需要在网页的head里加入下面这条元标签

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


点赞
(0)|
收藏
(0)
|
纠错
浏览 165 次
发布时间:2019年08月11日 12:42:49 所属 CSS知识 CSS3响应式布局常见知识
现在很多网站都使用响应式布局,这样可以使用多平台,一般做响应式布局我们都会写三到四个以上的尺寸。
CSS知识

推荐分享

热门