html css学习笔记-响应式布局的两种基本实现

最新推荐文章于 2022-04-17 10:32:58 发布

绿叶清风

最新推荐文章于 2022-04-17 10:32:58 发布

阅读量823

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45771439

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
   <!--media 指定当前屏幕，当最大宽度不超过640时引入这个css-->
    <link  href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)"/>
    <!--内嵌-->
    <style >
        /*<!--大于640时引入的样式-->*/
        @media screen and (min-width: 640px){
              body{
                  background-color: red;
              }
        }
    </style>
</head>
<body>
<!--
  响应式布局：一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本
  优点：
     面向不同分辨设备灵活性强
     能够快捷解决多设备显示适应问题
  缺点：
     兼容各种设备工作量大，效率低下
     代码累赘，会出现隐藏无用的元素，加载时间长
  基本实现：
     css中的media query(媒介查询)
     设备宽高：device-width,device-heigth  物理宽高
     渲染窗口的宽和高：width heigth
     设备的手持方向：orientation
     设备的分单率：resolution
    使用方法：
      外联：在外部引入
      内嵌样式：直接写在内部
-->

</body>
</html>

外部css

*{margin: 0px;padding: 0px}
body{
    background-color: pink;
}

绿叶清风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html css学习笔记-响应式布局的两种基本实现

html /**/ @media screen and (min-width: 640px){ body{ background-color: red; } } <!-- 响应
复制链接

扫一扫