CSS3—媒体查询、CSS3—多列布局

最新推荐文章于 2023-09-14 22:31:12 发布

脑袋不灵光的小白羊

最新推荐文章于 2023-09-14 22:31:12 发布

阅读量333

点赞数

分类专栏： HTML+CSS+JS 文章标签： html css

本文链接：https://blog.csdn.net/qq_42588990/article/details/107590338

版权

HTML+CSS+JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、Media Query响应式布局—媒体查询

应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的网站采用这个技术。
在这里插入图片描述

响应式设计一定是最佳选择吗？

如果预算充足且形势需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多，比如获取当前用户的GPS定位，只是用响应式设计会很难实现。但如果只是根据视口大小为用户提供匹配的视觉效果还是优先选择响应式设计。
优点：
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：
1.兼容各种设备工作量大，效率略慢
2.代码累赘，会出现隐藏无用的元素，加载时间加长
3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

大尺寸: 导航在顶部，图片只有一行。
中等尺寸: 导航在左边，图片变成3列。
小尺寸: 导航在顶部，LOGO没有了背景图片，图片变成3列。
在这里插入图片描述

页面的布局会根据浏览器的尺寸在1列，
2列和4列之间切换
在这里插入图片描述

CSS中的Media Query（媒介查询）是什么？

作为CSS3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种类型的用户提供了最佳的体验，网站在任何尺寸设置下都能有最佳的显示效果。

通过不同的媒体类型和条件定义样式表规则。

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width

Media Queries功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式
媒体查询实例

通过此实例观察媒体查询的功能后，再来分析语法

body{background-color:grey; }   //正常情况是灰色

@media screen and (min-width: 992px) {//宽度大于 992px 的时候被应用 pc端
 	 	.class {background: #666;}  }  
   			  			      
@media screen and (max-width: 768px) { //宽度小于768px的时候被应用  移动端
  		.class { background: #ccc; }  }
			 
@media screen and (min-width: 768x) and (max-width: 992px) {  //宽度在 768px 和 992px 之间的时候被应用
  		.class {  background: #333;  }   }

使用Media Query的基本语法

@media mediatype and|not|only (media feature) {
       CSS-Code;
 }

以上通过@media定义媒体查询，mediatype代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。

@media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。

媒体类型有：
all 所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备

用媒体查询改造我们的设计：

我们都知道，样式表里面，后面的样式会覆盖前面的样式。因此，我们可以在设置好网站基本样式后，使用媒体查询来进一步重写相应的部分。例如，在PC端将导航显示成简单的链接，然后再针对小视口，使用媒体查询重写这一部分。理论上讲最好是从小屏幕设备开始设计，然后渐进增强。但实际上我们使用媒体查询要解决的问题，都是已经存在PC端站点了，更多的是要将现有的桌面版网页改造成响应式的。

加载媒体查询的最佳方法：

使用多个独立的CSS文件会增加HTTP请求的数量，使页面加载变慢。所以我们的媒体查询样式的文件尽量放在一个里面，以注释加以区分。

阻止移动浏览器自动调整页面大小

ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的标签中插入一个标签，meta标签中可以设置具体的宽度或缩放比。下面为示例

<meta name="viewport"  content="initial-scale=1.0,width=device-width" />

name=”viewport” 说明此meta标签定义视口的属性
initial-scale=2.0 意思是将页面放大两倍
width=device-width 告诉浏览器页面的宽度等于设备宽度

允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半

<meta name=”viewport” content=”width=device-width, maximum-scale=3, minimum-scale=0.5” />

禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />   //user-scalable=no是禁止缩放

媒体查询

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        /*pc端*/
        @media screen and (min-width: 992px){
            body{
                background-color: red;
            }
        }
        /*移动端*/
        @media screen and (max-width: 768px){
            body{
                background-color: blue;
            }
        }
        /*ipad端*/
        @media screen and (max-width: 992px) and (min-width: 768px){
            body{
                background-color: orange;
            }
        }
    </style>
</head>
<body>

</body>
</html>

媒体查询布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>媒体查询布局</title>
    <meta name="viewport"  content="initial-scale=1.0,width=device-width" />

    <style>
        .box{
            margin: 0 auto;
        }
        .box>div{
            width: 229px;
            height: 274px;
            background-color: pink;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        /*pc端*/
        @media screen and (min-width: 992px){
            .box{
                width: 946px;
            }
            .box>div:last-child{
                margin-right: 0;
            }
        }
        /*ipad端*/
        @media screen and (min-width: 768px) and (max-width: 992px){
            .box{
                width: 468px;
            }
            .box>div:nth-child(2),.box>div:nth-child(4){
                margin-right: 0;
            }
        }
        /*移动端*/
        @media screen and (max-width: 768px){
            .box{
                width: 307px;
            }
            .box>div{
                width: 307px;
                height: 256px;
                margin-right: 0;
            }
        }
    </style>
</head>
<body>
 <div  class="box">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
 </div>
</body>
</html>

二、多列

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。

多列有这么几个常用属性

column-count  分几列
column-gap  列间距
column-rule  列分割线的样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多列</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid red;
            column-count: 3;
            column-gap: 30px;
            column-rule: 2px solid red;
        }
    </style>
</head>
<body>
 <div  class="box">
     CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。
     CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。
     CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。

 </div>
</body>
</html>

脑袋不灵光的小白羊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3—媒体查询、CSS3—多列布局

一、Media Query响应式布局—媒体查询应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的网站采用这个技术。响应式设计一定是最佳选择吗？如果预算充足且形势需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多，比如获取当前用户的GPS定位，
复制链接

扫一扫

专栏目录