CSS3动画---移动端上下固定高度，中间自适应_css实现移动端底部的高度_马优晨的博客

相关文章推荐

开心的柳树 · 凜冬將至，做好保暖―遊戲《冰封龐克》裡的政治 ...· 1 年前 ·

刚分手的小刀 · GitKraken Desktop ...· 1 年前 ·

跑龙套的沙滩裤 · 开始 | 微信开放文档· 2 年前 ·

玩篮球的松鼠 · 国运婚配，我能重置综漫人物道具_哔哩哔哩_b ...· 2 年前 ·

腼腆的饭卡 · 聚合 :: Java REST Client· 2 年前 ·

< meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document < / title > < style > body { width : 100 vw ; height : 100 vh ; display : grid ; grid - template - rows : 10 vh 1 fr 10 vh ; . content { background : red ; < / style > < / head > < div > < / div > < div class = "content" > < / div > < div > < / div > < / body > < / html >

使用栅格布局， grid-template-row 该属性使用在对应父元素上，控制子元素分割展示；

问题描述：移动端，手机显示界面，需要头部高度10vh,底部高度10vh,中间的高度自适应；效果展示：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document 移动端 页面头部多数高度 44px。底部 52px 54px 56px ///box-sizing:border-box;////怪异盒模型：假如一个div 300X300 padding:5px border:5px; 怪异盒模型包括 padding和border 但不包括margin. 第一.rem布局： 1，必须写 <meta ...

移动端 适配 <meta name='viewport' conent='width-device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'> veiwport参数当前的meta标签是设置 veiwport属性的，这个属性在 移动端 有效 content: 进行viewport的设置 width：控制 viewport 的大小 device-width 为设备的宽度（单位为缩放为 100

三行布局，即：上、中、下。有两种方案：1.上下固定，中间 自适应 ；2. 中间固定，上下 自适应 。本文介绍第1种方案。两边固定，中间 自适应 ，一共有如下几种方案： flex布局（推荐）网格布局（grid) vh+calc() 表格布局（table）（不推荐）绝对定位布局（不推荐）上下固定，中间 自适应 ，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%

iPhoneX 及以上手机底部适配 CSS3 概述：iOS 移动端 设备从iphoneX之后几乎都是全面屏，刘海屏。但是像这种全面屏的iOS设备，在底部有一个菜单呼出按钮，这个时候我们就需要进行相应的适配。这里我简单记录下我自己在工作中使用的适配方式。实现 iPhoneX 及以上的手机底部适配，当浏览器底部的菜单栏被隐藏的时候，位于底部的选项框自动增加高度当浏览器底部的菜单栏被显示的时候，位于底部的选项框自动减少高度实现方式在 css 中有一个计算属性 calc() , 将需要计算的值（

CSS3 动画是一种非常强大的动画技术，它可以让网页变得更加生动、美丽。本文将为大家详细介绍 CSS3 动画的各个属性，包括动画名称，持续时间，延迟时间，动画速度曲线，以及动画的执行次数等。动画名称（animation-name）：与 CSS 中的类似，动画名称是指定 CSS3 动画所使用的关键帧动画。这个属性用来指定一个已定义的动画名称，以便调用该动画。持续时间（animation-duration）：定义 CSS3 动画的持续时间。默认值为0，表示没有动画效果。通过使用单位“秒（s）”或“毫秒（ms）”来定义动画的持续时间。延迟时间（animation-delay）：指定动画开始前的等待时长。默认值为0，即动画将立即开始。通过使用单位“秒（s）”或“毫秒（ms）”来定义延迟时间。动画速度曲线（animation-timing-function）：定义动画的速度曲线，可以使动画有更加自然的过渡效果。使用缓动函数可以让动画更具有灵活性，可以在不同的时间点采用不同的速度曲线，从而实现更复杂的动画效果。动画执行次数（animation-iteration-count）：指定动画的执行次数。可以使用数字或者“infinite”关键字来指定动画的执行次数。如果将其设置为“infinite”则表示动画将一直持续执行下去。动画方向（animation-direction）：指定动画是否循环播放，并且指定循环播放的方向。这个属性可以使用以下值：normal，reverse，alternate和alternate-reverse。动画填充模式（animation-fill-mode）：指定动画在开始或结束时对元素的样式应该如何处理。使用这个属性可以让动画具有更加平滑的效果，可以避免由于动画结束时样式的改变而造成的过度影响。总之，通过使用上述属性，我们可以为网页添加各种丰富的动画效果，让网页更加互动、生动，也更能吸引用户的眼球。