css的响应式布局和动画

把响应式布局和动画放在一起写是因为他们有个共同点@符号

先讲讲响应式布局@media
响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件越来越大,兼容难度越来越大,js也会很难写,于是他们离开了历史的舞台,

如今流行的还是手机端一份,pc端一份,pc用css适配实现,但是pc的屏幕大小也有很大的区别,于是响应式布局==从适配手机pc转移到了适配各种pc屏幕大小上==,这就是所有pc的css框架都会有的栅格系统

栅格系统原理

/* 超小屏幕(手机,小于 768px) */
@media (max-width: 767px) { ...css代码... }

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: 768px) and (max-width: 991px) { ...css代码... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: 992px) and (max-width: 1199px) { ...css代码... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: 1200px) { ...css代码... }

然后讲讲css3的动画@keyframes
动画效果的出现减少了页面对于gif图的依赖,也是间接的优化了文件请求个数的体现

div{
   width: 100px;
   height: 100px;
   background: red;
   /* 动画的名字,执行一次的时间,动画的速率,是否循环动画 */
   animation: name 5s infinite linear;
}

@keyframes name{
   from { background: red; }
   to { background: yellow; }
}

原文地址:https://www.cnblogs.com/pengdt/p/12037528.html

时间: 2024-10-02 21:56:24

css的响应式布局和动画的相关文章

flex布局 响应式布局 过渡 动画

Z-index <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>z-index</title> <style type="text/css"> .box{ <!-- 辅助子级进行绝对定位 --> position:relative; width:400px; height:400px; backg

CSS之响应式布局

响应式布局 外部link的max.css #left { width: 50%; height: 100px; background-color: #FF6600; float: left; } #right { width: 50%; height: 100px; background-color: #3565ff; float: left; } 外部link的min.css #left { width: 100%; height: 100px; background-color: #FF66

css中响应式布局中样式的代码书写方法

代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ position: absolute; top: 18px !important; left: 18%; color: #000000; } } @media only screen and (min-width: 375px){ html { font-size: 10px !important; } .mu

利用media query写响应式布局

最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章. 简单记录一下用css写响应式布局的方法.大概可以这么理解,通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的. 首先先贴一个html,css都放在同级的css文件夹下面,因为有个简单的轮播,所以要引入jquery <!DOCTYPE html> <html>

关于bootstrap和响应式布局

bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

Demo —— 响应式布局

响应式布局实例演示 What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过. 优点:面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题. 缺点:兼容各种设备工作量大,效率低下:代码累赘,

响应式布局中的CSS相对量

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格.在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需要用到"自适应的图片"."流动布局"等技术. 体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法.然而,其中一些相对量的计算方法很容易混淆. 本文在完整梳理全部 CSS 属性基础上,将其中的"相对单位.百分比相对量.数字相对量&quo

css响应式布局RWD

响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比,em为单位代替精确值 3)采用媒体查询 二.媒体查询 IE8以下不支持媒体查询,需要引入 <!-- if lte IE 8> <script src="response.min.js"&g

css响应式布局用法

1.使用内联样式的用法 在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式 <head lang="en"> <meta charset="UTF-8"> <title>响应式布局示例</title> <style> @media screen and (min-width: 800px) { body { background-color: red; } } @m