页面通过CSS实现页面自适应

最新推荐文章于 2024-10-10 12:15:57 发布

趙俐鵬

最新推荐文章于 2024-10-10 12:15:57 发布

阅读量949

点赞数

分类专栏：前端开发文章标签：自适应

本文链接：https://blog.csdn.net/qq_42838624/article/details/100725929

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

下面我是简单以body作为类，进行样式定义

index.css如下：

/* 页面没有超过640px引用这个样式 */
@media screen and (max-width: 600px){
    body{
              background-color: #13c2c3;
             }
                }

/*大于600px，小于900px之间的背景颜色*/
@media (min-width: 600px) and (max-width: 900px) { 
    body{
                 background-color: yellow;
             }
}


/* 页面超过640px引用这个样式 */
@media screen and (min-width: 900px){
     body{
                  background-color: #0041ff;
              }
                }

在html中我是直接引入外部index.css的代码

index.html如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link  href="css/1.css" type="text/css" rel="stylesheet"/>
    
    
</head>
<body>

</body>
</html>

以上是页面自适应的全部源代码，如果大家还有什么不懂的可以直接把代码复制到编辑器里预览效果，毕竟效果决定一切！！！

如果您不想把两个或多个页面样式放到一个css，也可以通过在外部引入css同时设置权限如下：

  <!--media 指定当前屏幕，当最大宽度不超过640时引入这个css-->
 <link  href="css/1.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)"/>
<!--media 指定当前屏幕，当最小宽度超过640时引入这个css-->
 <link  href="css/2.css" type="text/css" rel="stylesheet" media="only screen and (min-width:640px)"/>

这个通过上面的index.css应该可以看出这个引入的方式的意思，意思是页面小于640px引入1.css文件，页面大于640px引入2.css文件。