html5/css3响应式设计

浅浅的花香味﹌ 2024-02-19 17:34 64阅读 0赞

#### 响应式 ####

*   *  媒体查询
     *   *  一、使用媒体查询
         *  2. 写法
         *  3.指定设备宽度
         *  4.import按照媒体查询引入样式
         *  5.媒体查询属性
         *  5.控制缩放
     *  二、流式布局
     *   *  1.通用公式
         *  2.px转百分比
         *  3.字体大小em
         *  4.响应式图片
     *  3.CSS属性
     *   *  1.文字阴影text-shadow
         *   *  取消文字阴影
             *  多重阴影
         *  2.盒子阴影
         *   *  盒子内阴影
         *  3.渐变
         *   *  写法
         *  4.过渡transition
         *   *  为不同的样式设置过渡时间
         *  5.变形
         *   *  transform-origin
         *  3d变形
         *  c3表单伪类选择器
     *  四、布局
     *  四、技巧
     *   *  1.渐进增强

### 媒体查询 ###

#### 一、使用媒体查询 ####

两种写法。  
方式一,直接写在样式表中：

body {
        
    	background-color: grey;
    }
    @media screen and (max-width: 960px) {
        
        body {
        
            background-color: red;
        }
    }
    @media screen and (max-width: 760px) {
        
        body {
        
            background-color: orange;
        }
    }
    @media screen and (max-width: 550px) {
        
        body {
        
            background-color: yellow;
        }
    }
    @media screen and (max-width: 320px) {
        
        body {
        
            background-color: green;
        }
    }

方式二，写在css文件中：

#### 2. 写法 ####

在**CSS**中通过`@media`指定，在html标签中通过**link**标签引入时通过`media`属性指定。  
如下，表示 **显示屏(screen)**(也可能是打印机print) and **不超过最大宽度是960px** (max-width: 960px) 应用对应的这个样式

@media screen and (max-width: 960px) {
        
    	
    }

也可以是下面这样，**显示屏**（screen） **纵向放置的显示屏**（orientation: portrait） **最小不小于660px**（min-width: 660px) 应用样式 sytle-660.css

可以取反使用**not**

或连接用","，表示满足其中一个条件就应用这个样式（投影仪（projection））

#### 3.指定设备宽度 ####

`max-device-width: 600px`，指定设备屏幕大小。

@media screen and (max-device-width: 600px) {
        
       body {
        
            background-color: yellowgreen;
        }
    }

#### 4.import按照媒体查询引入样式 ####

如果满足`screen and (max-width: 1600px)`就引入一个white.css样式文件。但是这样会从网络加载样式文件（发请求，影响样式加载时间）

@import url('white.css') screen and (max-width: 1600px);
     @media screen and (max-device-width: 1600px) {
        
         body {
        
             background-color: yellowgreen;
         }
     }

#### 5.媒体查询属性 ####

*  width:视口宽度。
 *  height:视口高度。
 *  device-width:渲染表面的宽度(对我们来说，就是设备屏幕的宽度)。
 *  device-height:渲染表面的高度(对我们来说，就是设备屏幕的高度)。
 *  orientation:检查设备处于横向还是纵向。
 *  aspect-ratio:基于视口宽度和高度的宽高比。一个 16∶9 比例的显示屏可以这样  
    定义 aspect-ratio: 16/9。
 *  device-aspect-ratio:和 aspect-ratio 类似，基于设备渲染平面宽度和高度的  
    宽高比。
 *  color:每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16 位颜色。
 *  color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
 *  monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如  
    monochrome: 2。
 *  resolution:用来检测屏幕或打印机的分辨率，如 min-resolution: 300dpi。还  
    可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm。
 *  scan:电视机的扫描方式，值可设为 progressive(逐行扫描)或 interlace(隔  
    行扫描)。如 720p HD 电视(720p 的 p 即表明是逐行扫描)匹配 scan: progressive，  
    而 1080i HD 电视(1080i 中的 i 表明是隔行扫描)匹配 scan: interlace。
 *  grid:用来检测输出设备是网格设备还是位图设备。

#### 5.控制缩放 ####

initial-scale=0.5 表示显示时，初始化缩放为0.5倍  
minimum-scale=0.5 表示最小缩放0.5倍，不能继续缩放了  
width=device-width 指定宽度为设备宽度  
user-scalable=no 禁止缩放

### 二、流式布局 ###

#### 1.通用公式 ####

目标元素大小 \* 上下文元素大小 = 结果

#### 2.px转百分比 ####

当使用px作为单位时，元素的大小是固定的，不能随着浏览器窗口大小变化而变化，响应式布局中不能用px作为单位。使用百分比时可以达到要求。  
比如网页设计是按照1920px的屏幕设计的，网页宽度是1820px，那么这个1920px就是最基本宽度，那么此时网页宽度应该设置为 1820 / 1920 = **94.791667%** ，计算百分比重要的是要确定**上下文元素大小**。

#### 3.字体大小em ####

字体大小设置为px，字体不会随着网页的缩放而缩放，要达到字体缩放的目的，字体的单位应该使用em（发音同“M”）。浏览器默认字体大小是**16px**。我们可以为body设置一个标准字体，最为最上层上下文字体大小，也即百分百大小字体。  
设置body字体大小的三种方式：

font-size: 100%; 
    font-size: 16px; 
    font-size: 1em;

比如有如下结构：

#### 4.响应式图片 ####

设置响应式图片只需要将图片的max-width设置为100%即可：

max-width: 100%;

### 3.CSS属性 ###

[https://css-tricks.com/][https_css-tricks.com]

#### 1.文字阴影text-shadow ####

基本语法:

text-shadow: 1px 1px 1px #ccc;

第一个参数：阴影的右偏移量  
第二个参数：阴影的下偏移量  
第三个参数：模糊距离（即阴影从开始变淡到完全消失的距离），可以省略  
最后一个参数：阴影颜色

##### 取消文字阴影 #####

text-shadow: none;

##### 多重阴影 #####

text-shadow: 5px 5px 5px #ccc, 10px 5px 1px #f1a3a3;

#### 2.盒子阴影 ####

box-shadow: 0 4px 5px rebeccapurple;

参数和文字阴影相同

##### 盒子内阴影 #####

inset 指定盒子内阴影

box-shadow: inset 0 4px 5px rebeccapurple;

也可以指定多重阴影，同文字阴影一样。

#### 3.渐变 ####

##### 写法 #####

background: linear-gradient(90deg, #fff 0%, #f1a3a3 50%, #fff 100%);

第一个参数：渐变方向，默认是从上到下的渐变，90deg表示顺时针方向旋转90度，相当于从右到左的旋转了  
第二个参数（\#fff 0%）：前面是**颜色**后面是**渐变距离**，至少两个参数  
上面的代码的意思是：从右向左的渐变 0% 起始颜色是 \#fff ， 从0%到50%的颜色是\#fla3a3，100%终止颜色是\#fff

background: linear-gradient(90deg, deeppink 20%, #f1a3a3 50%, #fff 80%);

上面的意思是其实颜色是deeppink，20%表示0-20%都是deeppink，从20%开始渐变到50%处的\#fla3a3颜色，再渐变到80%处的\#fff颜色，最后一个也是终止颜色也即从80%到100%都是这个颜色。

#### 4.过渡transition ####

具体属性：

transition-property: all;
     transition-duration: 1s;
     transition-timing-function: ease;
     transition-delay: 0;

简写属性：

transition: all 1s ease 0s;

第一个参数**transition-property**：要过渡的属性，all表示所有属性，也可指定单独属性background-color等  
第二个参数**transition-duration**：过渡时间  
第三个参数**transition-timing-function**：过渡速度（ease：轻缓 、linear：线性的、ease-in：轻缓进入、ease-out、ease-in-out 或 cubic-bezier：三次bezier曲线 [http://cubic-bezier.com/）][http_cubic-bezier.com]  
第四个参数**transition-delay**：开始过渡延迟时间

##### 为不同的样式设置过渡时间 #####

transition-property: color, background-color, box-shadow;
    transition-duration: 2s, 3s, 4s;
    transition-timing-function: ease;
    transition-delay: 0;

#### 5.变形 ####

下面代码的作用是让元素缩放1.4倍：

transform: scale(1.4)

属性：

scale：用来缩放元素（放大或缩小）
    translate：在屏幕上移动元素（上下左右四个方向）
    rotate：按照一定角度旋转元素（单位为度deg）
    skew：沿 X 和 Y 轴对元素进行斜切
    matrix：允许你以像素精度来控制变形效果

*  scale  
    缩放1.4倍

transform: scale(1.4);

*  translate  
    左移20px，下移10px

transform: translate(-20px, 10px);

*  roate  
    顺时针选择45度

transform: rotate(45deg);

*  skew  
    x轴倾斜45度y轴倾斜10度  
    transform: skew(45deg, 10deg);
 *  matrix  
    这个网站http://www.useragentman.com/matrix/可以生成matrix值。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTIyNTE2OTAy_size_16_color_FFFFFF_t_70]

##### transform-origin #####

变形都是有原点的，而transform-origin就是指定原点坐标  
语法：transform-origin: x-axis y-axis z-axis;

#### 3d变形 ####

[https://www.cnblogs.com/shenzikun1314/p/6390181.html][https_www.cnblogs.com_shenzikun1314_p_6390181.html]

#### c3表单伪类选择器 ####

input:required:选择必填表单域;
    input:focus:invalid:选择当前聚焦的且含有非法输入值的表单域; 
    input:focus:valid:选择当前聚焦的且含有合法输入值的表单域。

### 四、布局 ###

移动设备优先：

html {
        
    
    }
    @media screen and (min-width: 320px) {
        
     
    }
    @media screen and (min-width: 1024px) {
        
      
    }

桌面优先：

html {
        
    
    }
    @media screen and (max-width: 1024px) {
        
    
    }
    @media screen and (max-width: 320px) {
        
     
    }

### 四、技巧 ###

#### 1.渐进增强 ####

width: 25%;指定了浏览元素的宽度，width: calc(100% / 4);也可以通过这种计算方式来指定并且更加，但是有些浏览器不支持。所以写上两种，支持的浏览器已第二种为准，不支持已第一种为准。

.nav-list-item {
        
      color: white;
      float: left;
      /* 渐进增强 */
      width: 25%;
      width: calc(100% / 4);
    }

[https_css-tricks.com]: https://css-tricks.com/
[http_cubic-bezier.com]: http://cubic-bezier.com/%EF%BC%89
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTIyNTE2OTAy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/99cbe1b2386f4714b58be5ac3d635a53.png
[https_www.cnblogs.com_shenzikun1314_p_6390181.html]: https://www.cnblogs.com/shenzikun1314/p/6390181.html