响应式网页设计多宽 第1篇
目前我们只是初步完成了页面结构的HTML和默认结构样式，当然，并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的，由于还没有做任何media query方面的工作，页面还不能随着浏览器尺寸的变化而改变布局。
首先我们需要在页面中调用文件，来帮助IE8或是之前的版本支持CSS3 media queries：
接下来，我们要创建CSS样式表，并在页面中调用：
响应式网页设计多宽 第2篇
同样的，对于视频，我们也需要做max-width: 100%的设置；但是Safari对embed的该属性支持不是很给力，所以我们以width: 100%来代替：
iPhone中的初始化缩放
默认情况下，iPhone中的Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。我们可以使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。
对于那些尚不支持media query的浏览器，我们要在页面中调用
实现自适应页面设计的关键之一，就是使用CSS根据分辨率宽度的变化来调整页面布局结构。
通过max-width: 100%和height: auto实现图片的弹性化。
通过width: 100%和height: auto实现内嵌元素的弹性化。
通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整
响应式网页设计多宽 第3篇
常用类型：①、screen 电脑屏幕 ②、all 所有类型
属性：
①、and：同时满足这两者时生效，到达限定范围
②、max-width：小于等于
③、min-width：大于等于
④、only：指定特定的媒体类型 例：@media only screen and （媒体类型：仅是电脑屏幕）
⑤、displsy：none 隐藏 不保留原位置 / visibility: hidden 隐藏 保留原位置
1、@media方式：
格式：@media 媒体类型 and （媒体特性）{ 样式 }
例：@media screen and （max-width：1200px）{样式代码…}
解析：媒体类型是电脑屏幕 并且屏幕宽度小于等于1200px 样式才开始生效
例：@media screen and （max-width：1200px）and（min-width：600px）{样式代码…}
解析：媒体类型是所有设备 并且屏幕宽度大于等于600px并且小于等于1200px生效
格式：
解析：媒体类型是仅是电脑屏幕 并且屏幕宽度小于等于500px生效
响应式网页设计多宽 第4篇
绝对定位；移动距离左边50% 然后再用margin距离左外边框距离为负值 值为自身宽度的一半
例：元素{
width: 960px;
position: absolute;
left: 50%;
margin-left: -480px;（-50%）
绝对定位；移动距离顶部50% 然后再用margin距离顶部外边框距离为负值 值为自身高度的一半
例：元素{
width: 960px;
position: absolute;
top: 50%;
margin-top: -480px;（-50%）
①、绝对定位上右下左都是0
②、且margin auto
③、有固定宽高
例：元素{
position: absolute;
left: 50%;
top：50%;
transform: translate(-50%，-50%);
}
如果文字过多需要加 word-break：break-all（文字换行）
①、父元素要有宽高
②、在父盒子上操作 转变为弹性盒模型：display: flex;
③、设置主轴（x轴）对齐方式为居中：justify-content: center;
④、设置交叉轴（y轴）对齐方式为居中： align-items: center;