CSS 响应式设计1

最新推荐文章于 2021-08-03 22:18:09 发布

ZT黄

最新推荐文章于 2021-08-03 22:18:09 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/weixin_44055272/article/details/90241688

版权

1 屏幕的参数介绍

1.1 屏幕尺寸

1。我们经常听说笔记本屏幕是13、14、15.6寸.手机的屏幕尺寸大多在4-7寸的范围内。这里的寸指的是英寸，1英寸=2.54厘米。比如我的电脑是15.6寸，换算过来应该是39.624厘米，这个肯定不是我的屏幕长度，那这个是什么呢？
2.这个尺寸其实是对角线的长度。例如我的电脑长347mm，宽194mm，根据勾股定理得到对角线长度397.5mm，就和上面的396.24差不多。手机屏幕同理，都是对角线的长度。
3.对于特殊的圆角手机屏计算也是同理的。

1.2 像素与分辨率

关于像素详解可以看我的另一篇博客
1.像素pixel：计算机如何在屏幕给我们显示图像呢？、
（1）实际上屏幕是有许许多多的“小灯泡”均匀排列组成的，不同的小灯泡有规律地发着不同颜色的光，众多的小灯泡聚集起来形成了呈像的效果。就好像我们小时候六一表演节目一样，不同的组穿着不同颜色的衣服，有规律地排列，从天上看来好像一个字或者一个简单的图像。因此我们可以说计算机的一个像素就是一个小灯泡，他可以发不同颜色的光。
2.分辨率resolution ratio：水平方向上一行有多少个像素x竖直方向上有多少个像素。
3.像素并不是一个像厘米一样的绝对长度。在不同厂家生产的不同的设备上一个像素表示的长和宽可能不同，也就是说一个小灯泡的大小不一样。
例如我的手机屏幕150mmx70mm，分辨率2340x1080.电脑屏幕347mmx194mm，分辨率1920x1080。这样算来手机上的一个像素的长和宽都要比电脑大了。
4.关于一台电脑上不同的分辨率设置。我们买电脑的时候所说的分辨率是最大支持的分辨率。也就是说我们这个电脑有1920*1080个像素，最多可以支持这么大的像素。你可以不全部使用，因此可以设置为1680x1050，这样的话你的电脑会有很恶心的情况。

1.3 像素密度 ppi （pixel per inch）

到底如何才能使图片或者呈现看着更加清晰呢？一般来说单位面积内的像素个数越多，越清晰。
所以，公认的评价清晰度的方式就是像素密度。
计算公式：水平像素平方+竖直像素平方开根后处除以屏幕尺寸
如果还不懂三者之间的关系可以看
http://www.woshipm.com/ucd/198774.html

1.4 网页设计常用单位区分。

1.px 像素
2.em
3.rem

1.5 网页的尺寸

        console.log(window.innerWidth);
        console.log(window.innerHeight);

这两句代码可以告诉你浏览器最多能够显示多少像素。

2 响应式设计介绍

2.1响应式设计

1.针对不同设备，需要有不同的网页效果。例如针对电脑设计的网页，如果直接放到手机上浏览，会产生不好的效果。
2.对于电脑上的浏览器，可以随意的缩放大小，就需要根据当前浏览器大小进行页面的改变。

2.2 viewport视窗

https://jingyan.baidu.com/album/7e44095326ce002fc1e2ef40.html?picindex=1
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
可以简单地认为，手机会装逼，他们根本不能显示那么多的像素，但是非要显示那么多的像素，能力不够还装逼，只会有非常丑的效果。

2.3 meta标签设置进行视窗设置，

1.以后在代码前加上这句话就可以根据使得手机的viewport等于手机的宽度。
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
2.设置视窗的宽度是设备的宽度，并且开始的时候缩放比例为1.0
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

2.4 浏览器模拟手机

打开chrome浏览器->F12->点击手机的形状，就可以模拟不同尺寸的手机，也可以自定义手机的尺寸（400600）表示屏幕是4寸6寸的。
在这里插入图片描述

2.5 在不同设备上应用

如果设计的网页在不同尺寸的设备上使用，最好使用百分比设置宽度。

3 栅格布局

https://www.runoob.com/css/css-rwd-grid.html

3.1 什么叫栅格布局

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。这样就方便了布局。

3.2 实例

1.定义 col-数字类
2.定义row类。
https://www.runoob.com/try/try.php?filename=tryresponsive_styles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
        [class*="col"]{
            float: left;
            padding: 15px;
        }
        .row:after {
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
<div class="row">
<p  style="background-color: #FF0000;display: inline-block"  class="col-3">第一段文字</p>
<p  style="background-color: #FFD700;display: inline-block"  class="col-6">第二段文字</p>
</div>
<div class="row">
<p  style="background-color: #d0e9c6;display: inline-block"  class="col-10">第三段文字</p>
<p  style="background-color: #4CAF50;display: inline-block"  class="col-8">第四段文字</p>
</div>
</body>
</html>

4 媒体查询

4.1 为什么需要文本查询

4.2 基本语法与可用参数

1.基本语法
（1）在style标签对里，看起来好像有点麻烦。
@media [not|only] mediatype1 and (media feature1)[,|or [not|only] mediatype1 and (media feature1) ] {
CSS-Code;开始写选择器和其内容
}
对一种媒体类型的媒体特征的话这样写就可以了@media mediatype and (media feature){}
（2）在头部的link标签里。
<link rel=“stylesheet” media="(1)中media之后的内容">
如果有错可以参考这里。https://blog.csdn.net/petterp/article/details/82259734
2.可用参数
（1）媒体类型 mediatype，一般我们用的就是screen

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

（2）and not only。and和only效果差不都，都是满足媒体特征的媒体。not表示取反。
（3）媒体特征
这里太多了，我们最常用的就是max-width和max-height。分别表示当前可视区域的宽度和高度。
max-width表示媒体宽度小于这个值，max-height同理。
min-width表示媒体宽度大于这个值，min-height同同理
3.实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media only screen and (max-width: 600px) {
            .example {background: red;}
        }

        /* Small devices (portrait tablets and large phones, 600px and up) */
        @media only screen and (min-width: 600px) {
            .example {background: green;}
        }

        /* Medium devices (landscape tablets, 768px and up) */
        @media only screen and (min-width: 768px) {
            .example {background: blue;}
        }

        /* Large devices (laptops/desktops, 992px and up) */
        @media only screen and (min-width: 992px) {
            .example {background: orange;}
        }

        /* Extra large devices (large laptops and desktops, 1200px and up) */
        @media only screen and (min-width: 1200px) {
            .example {background: pink;}
    </style>
</head>
<body>
<div  class="example">abc</div>
</body>
</html>

4.3 关于移动设备的其他处理

1.移动设备优先，设计web页面的时候，都要先设计移动端的。
2.手机横屏和竖屏的处理，判断当浏览器宽度与高度之间的区别

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

5.多媒体设备的响应

5.1 图片响应

https://www.runoob.com/css/css-rwd-images.html
1.可以通过媒体查询对图片进行处理
2.使用picture标签对不同的媒体设备进行图片区分。效果图https://www.runoob.com/try/try.php?filename=tryresponsive_image_picture

5.2 视频响应

https://www.runoob.com/css/css-rwd-videos.html

ZT黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 响应式设计1

屏幕的参数介绍屏幕尺寸像素与分辨率像素密度响应式设计介绍1.响应式设计针对不同的屏幕，需要有不同的网页效果。例如针对电脑设计的网页，如果直接放到手机上浏览，会产生不好的效果。2.meta标签设置https://jingyan.baidu.com/album/7e44095326ce002fc1e2ef40.html?picindex=1...
复制链接

扫一扫