1、设备的宽和高 2、渲染窗口的宽和高 3、设备的手持方向
4、画面比例 5、设备比例 6、对象颜色或颜色列表
7、设备的分辨率
实例：
方法一：
@media all and(max-width:1024px){
//电脑横屏的
}
@media all and(max-width:768px){
//电脑竖屏的
}
方法二：

弹性布局

1、弹性布局，也叫伸缩盒子或弹性盒布局。为display属性添加了新增：flex，并定义了一些新的属性。可以创建对浏览器窗口响应良好的流动页面。

2、一般有弹性布局的容器和弹性布局伸缩项目组成。
(1)、容器值采用弹性布局的DOM元素。
(2)、伸缩项目指的是容器中包含的子DOM元素。

三要素：

(1)、弹性基准（display：flex;）
(2)、弹性方向(flex-direction:row;)
(3)、是否换行(flex-wrap:wrap;)

属性：

1、弹性显示顺序：order:1;
2、弹性基准：flex-basis:0%;
3、伸缩比例：flex-sherink:1;
3、扩展比例：flex-grow:1;
如：flex:1 1 auto;
4、主轴对齐：
（1）、justify-context:flex-end
（2）、针对内容对齐：justify-content:space-around;
5、垂直排列：flex-direction：column;

多列布局

设置列数： column-count：3；
由浏览器自动调整列宽：column-fill：balance；
列与列之间的样式：column-rule：medium solid black；
列与列之间的距离：column-gap：10px；
当过长时隐藏：overflow：auto；

2.3图片边框

边框：border:solid 100px;
图片边框：border-image:url() 100 stretch;
注：stretch表拉伸；round表环绕；repeat表平铺

2.4渐变背景：

一、线性渐变：颜色沿着一条直线过度，从一种颜色到另一种颜色的平滑渐变。
Linear-gradient([[|to],]?[,]< color-stop >+)
二、径向渐变：指以一个点为中心向四周扩散的渐变。
Redial-gradient(设置渐变中心，渐变形状，渐变大小，起始颜色值，中心颜色值)

2.5图片背景美化

Background-clip和background-origin属性值如下：
Border-box：在边框盒子内部绘制背景颜色和背景图片
Padding-box：在内边距盒子内部绘制背景颜色和背景图片
Content-box:在内容盒子内部绘制背景颜色和背景图片
方式：
设置位置：
Background-origin：border-box或者Padding-box或者Padding-box；
剪切：
Background-clip：content-box或者Padding-box或者Content-box；

3.1过度

1、//返回后的动画
strong{
transition-delay：10ms;
transition-duration：250ms;//过度周期
}
//最终效果
strong:hover{
font-size:x-large;
border:solid 2px #000000;
padding:5px;
color:#ffffff;
background-color:#054808
trasition-delay:0.1s;//延迟0.1s执行
transition-duration：600ms//执行周期
transition-property：font-size，border，padding，background；//设置过渡属性
}
css源码：
.strong{
color: #000;
transition-delay: 10ms;
transition-duration: 600ms;
}
.strong:hover{
font-size: x-large;
border: solid 2px #000;
padding: 5px;
color: #ffffff;
background: #054808;
transition-delay: 0.1s;
transition-duration: 600ms;
transition-property: font-size,border, padding,color,background-color;
}
2、transition：all 5s ease 0.3s;
注：all表所有属性； 5s表示动画执行5秒；效果为ease；延迟0.3s
还有很多如：ease、ease-in、ease-out、ease-in-out
background：#FF3366;

3.2动画

定义：动画本质上是增强的过渡，css3动画基于关键帧，动画是分两部分定义的。
（1）、@key-frames规则创建一个动画并定义应用动画的属性。
（2）、animation及其相关属性调用关键帧以实现动画。
简写格式如下：
animation：关键帧组名持续时间动画速度延迟时间播放次数；
实例：
@keyframes text-anim{\动画组名
from{
color: #000;
}
50%{
color:#ff0000;
}
75%{
color: #00ff00;
}
to{
color:#ffffff;
font-size: x-large;
border-radius: solid 2px #000;
padding: 5px;
background-color:#054808;
}
}
.strong:hover{\用伪类启动动画
animation-delay: 100ms;
animation-duration: 600ms;
animation-iteration-count: infinite;\循环次数
animation-direction: alternate;\循环方向（alternate表示反向执行）
animation-timing-function: linear;//线性变化
animation-name: text-anim; //指明是那个动画组
}

3.3平移和缩放变换

定义：变换是使元素改变形状、尺寸和位置的一种效果，通过CSS3变换能够对元素进行移动、缩放、旋转或扭曲。
变换使用transform属性来实现。
平移是基于元素中心位置发生变化的。
使用方式：
translate(水平平移大小，垂直平移大小)；
translateX(水平平移大小)；
translateY(垂直平移大小)；
缩放变换包含scale(x,y)、scaleX(n)和scaleY(n)3个方法。
使用方法：
scale(水平缩放倍数,垂直缩放倍数)；（小于1表缩小大于1表放大）
scaleX(水平缩放倍数); 或者 scaleY(垂直缩放倍数);
也可以一起使用：
transform：scaleX(水平缩放倍数) translateX(水平平移大小);

3.4旋转和倾斜变换

定义：旋转变换使用transform属性rotate函数实现，CSS3的旋转变换是依靠角度变换的。用正值围绕元素中心时顺时针旋转，用负值则逆时针旋转。
使用transform-origin属性指定旋转变换的起点。默认状态以中心为起点。
可以使用tranlate方法将元素的；原点(0,0)移动到什么地方，就在什么地方旋转，所以先调用tranlate方法，再调用rotate方法。
在CSS3实现倾斜变换有以下实现方法：
(1)、skew(x-angle,y-angle)定义2d沿着x轴和y轴倾斜旋转。
(2)、skewX(angel)就是将元素以旋转基点为坐标原点，沿x轴方向拉伸一定角度。
(3)、skewY(angel)就是将元素以旋转基点为坐标原点，沿y轴方向拉伸一定角度。
设置元素中心点：transform-origin:top left;（top、left表位置可以用百分比表示）
设置旋转：transform：rotate(45deg);\设置角度不加deg表弧度
设置倾斜角度：transform：skew(25deg,25deg);或者 skewX(25deg);或者 transform：skewY(25deg);

4.1游戏商城

设计三原则：化繁为简(共同性)、化零为整(一致性)、化静为动(灵活性)
首页布局原则：先主体后细节。
头部：header
中心部分：section
底部：footer
2、css样式命名规则：
对于大型网站的Web页面来说，组织和管理如此大量的CSS样式代码是一个问题。二BEM是现代大型项目中CSS代码的组织方式。
BEM通过CSS语义化的命名约定和CSS层的分离，将有助于css的可扩展性，性能的提高和代码的组织管理。BEM来源于3各组成的英文首字母，分别是：块(Block)、元素(Element) 修饰符(Modifier)。
命名原则：
(1)、BEM实体名称全部是小写字母或数字。名称中的不同单词用单个连字符(-)分隔。
(2)、BEM元素名称和块名称之间通过两个下划线(_)分隔。
(3)、布尔修饰符和其所修饰的实体名称之间通过两个连字符(-)不使用名值对修饰符。

weixin_43999182 发布了5 篇原创文章 · 获赞 0 · 访问量 82 私信关注

响应式布局