分辨率与布局

原创已于 2022-08-15 01:04:20 修改 · 669 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #css

于 2022-08-07 22:25:25 首次发布

笔记专栏收录该内容

3 篇文章

订阅专栏

文章目录

链接和资源
像素与分辨率
布局模式 div+css

链接和资源

后盾人学习网站
 粘性布局

像素与分辨率

1、分辨率是用来描述图片的像素信息的，比如我们说一张图片的分辨率是1280720，那么仅仅是描述这张图片，是由1280个像素 720个像素组成，不能表示任何关于图片清晰，清楚，质量高等的任何描述。
2、PPI（pixels per inch）是用来描述屏幕的像素显示密度，这个值越高，表示屏幕显示能力越强，PPI仅仅描述屏幕的显示能力，也不能描述任何图像的清晰度。PPI用于显示器，一个像素一个格子，“每英寸像素”，表示一行一英寸长有几个格子，常用于ui设计
3、DPI（dots per inch）DPI表示每英寸打印的点数，这个参数才能表示图片清晰度了，只有把图片显示在屏幕上面了，才能谈清晰度。比如打印大头照时候清晰度很高，如果是冲洗的话分辨率一般是300dpi，像素是295413，如果是网上传看的话一般72dpi，那么一寸照片像素是7199。DPI常用于打印机、平面印刷，表示“每英寸墨点
4、当我们把相同分辨率的图片，放在具有相同像素显示的屏幕上显示时:DPI=PPI，此时DPI=PPI 每一个像素，屏幕上对应一个点显示。
当图片分辨率>屏幕分辨率时：DPI=PPI，此时图片受屏幕限制、显示效果降低。
当图片分辨率<屏幕分辨率时：DPI<PPI，此时屏幕没有发挥全部能力、图片分辨率低。
5、像素在css 为px
总结：
分辨率只能用来描述图片的像素信息，不能描述图片清晰度
PPI只能用来描述屏幕的显示密度，也不能描述图片的清晰度
DPI用来描述图片显示的清晰度，表示图片在屏幕上的显示效果。
当图片分辨率与屏幕显示像素相同时， DPI与PPI值相等
当图片分辨率大于屏幕显示像素时， DPI与PPI值相等，图片显示较差
当图片分辨率小于屏幕显示像素时， DPI值< PPI值相等，图片显示正常，屏幕未达到最佳显示效果。
6、px pt em rem
px：单位名称为像素，相对长度单位，是相对于显示器屏幕分辨率而言的，一般指像素点个数。
pt：pt = px * (3/4)。例如：768px * (3/4) = 576pt。独立像素，iOS开发基本单位（Point）
em：表示相对于父元素的字体大小，em是相对单位，没有一个固定的度量值，而是由其它元素尺寸来决定的相对值。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸、任意浏览器的默认字体都是16px，所有未经调整的浏览器都符合：1em =16px。。
rem：相对于html元素的大小，rem可以做到只修改根元素就成比例地调整所有字体大小

文字和布局都用rem则可以避免那种能够根据屏幕大小自适应但是文字大小不会变的尴尬局面。

布局模式 div+css

1、文档流：

窗体自上而下分成一行一行，块级元素自上而下排列，宽度是父元素的100%，而高度就是根据内容撑开；而行内元素则从左到
排列，撑满一行在换行，高度和宽度根据内容撑开。

2、浮动布局：

它就是可以让块级元素显示在同一行，脱离文档流，需要考虑塌陷、清除浮动等因素、个人觉得比较难用，一般不使用。
优点：文字会包围浮动元素所占有的位置，围绕它进行布局，也就是浮动元素并不会脱离文本流，只会脱离文档流，这也是浮动布局的初衷。
浮动演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
img 
{
	float:top;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:top</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>

3、流式布局：

使用%百分比定义宽度，高度大都是用px来固定，可以根据可视区域（viewport,屏幕展示区域）(比如20vh/vw)和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在web前端开发的早期历史上，用来应对不同尺寸的pc屏幕，在当今的移动端开发也是常有的布局方式。
但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是宽度和文字大小都是用px固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样。
在这里插入图片描述

4、定位布局：

通过上下左右来定位自身布局的布局方式，它主要有relativ（相对定位）、absolute（绝对定位）、固定定位（fixed）、粘性定位（sticky）。

relative：脱离文档流但是保留占位符，根据自身所在位置来进行定位，相对于之前的位置。
当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级
相对定位不会改变元素的性质，块还是块，内联还是内联
注意：会撑大父元素

absolute：脱离文档流，不保留占位符。它的定位是一直追溯到父元素以上的、有relative或者fixed属性的元素，如果父级以上元素都没有设置，就会定位到HTML文档，注意不是body。

fixed：它是根据页面窗口，一些导航栏固定就会用到它，因为他对于页面窗口是静止的，脱离文档流。
在这里插入图片描述

sticky：随着容器滚动但不会超出屏幕（当父元素滚还有别的空间可以供他浮动的情况下）
当定义一个具有 position:sticky 样式的元素时，父元素会被自动定义为粘性容器

div {
    height: 100px;    
    margin-top: 50px;
    border: solid deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: lightskyblue;
}

sticky

5、弹性布局：

Flex（个人最常用的）大小能自动填充、位置能自动适应、注意区分主轴和副轴。
display:flex 之后默认是水平为主轴可以用flex-direction改变方向
在这里插入图片描述
写在父元素上：
justify-content 控制主轴的排列比如靠近开始还是结束
align-items 控制交叉轴的排列
flex-wrap 控制换行
align-items 控制交叉轴的排列（一行时）
align-content 控制交叉轴的排列（有多行时）
写在子元素上：
align-self 用于控制单个元素在交叉轴上的排列方式
flex-shrink 设置剩余空间的使用权重
flex-grow 设置剩余空间的使用权重。

6、响应式布局、媒体查询：

创建多个静态布局来适应不同分辨率的屏幕。
结合rem可以实现全局的自适应效果，字体也可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { 
			margin: 0;padding: 0; 
		}
        @media only screen and (width:750px) { 
            html { 
                font-size: 100px; 
            } 
        }
        @media only screen and (width:375px) { 
            html { 
                font-size: 50px; 
            } 
        }
        @media only screen and (width:320px) { 
            html { 
                font-size: 42.6666px; 
            } 
        }
        @media only screen and (width:414px) { 
            html { 
                font-size: 55.2px; 
            } 
        }
        .title { 
            font-size: 0.75rem; 
        }
        img { 
            width: 3.75rem; 
        }
    </style>
</head>
<body>
    <div class="title">12345</div>
    <!-- 默认情况下，图片多大，在显示多大 -->
    <img src="./01.png" alt="">
</body>
</html>

/样式1/
@media (min-width: 320px) {
.container{ width: 92%; margin: 4%; }
}

/样式2/
@media (min-width:320px) and (max-width: 640px){
.container{ width: 86%; margin: 7%; }
}

/样式3/
@media (max-width: 640px) {
.container{ width: 80%; margin: 10%; }
}

7、圣杯双飞翼：

比如项目里面，左右固定中间自适应：

<body>
  <div class="container">
    <div class="main">
      <div class="main-inner">i am main</div>
    </div>
    <div class="left">i am left</div>
    <div class="right">i am right</div>
  </div>
</body>
<style>
    .container {
      width: 100%;
      height: 300px;
      margin: 200px auto;
      border: 1px solid pink;
      overflow: hidden;
    }

    .main {
      float: left;
      width: 100%;
      height: 300px;
      background-color: black;
    }

    .main-inner {
      margin: 0 200px 0 100px;
      color: white;
      background: blue;
    }

    .left {
      width: 100px;
      float: left;
      height: 300px;
      margin-left: -100%;
      background-color: red;
    }

    .right {
      width: 200px;
      float: left;
      height: 300px;
      margin-left: -200px;
      background-color: purple;
    }
  </style>