html5移动端开发_html5/css3响应式页面开发总结

1. 自适应和响应的区别

自适应就是指一套模板去适应所有终端，但是在每个设备上看到的布局都是一样的，俗称宽度自适应。

一套响应式模板适合所有终端，但是各个设备看到的布局可能不一样。

响应式/自适应网页设计虽然为了兼容各种设备，存在工作量大、代码繁琐、加载时间长的缺点，但它们跨平台、跨终端，可以“一次设计，普遍适用”，可以自适应屏幕分辨率，自动缩放图片，自动调整布局，它们不仅仅是技术实现，更多的是一种全新的设计思维。

很多网站的解决方案是针对不同的设备提供不同的网页，比如提供专用版本或者iPad版本。这样固然保证了效果，但是比较麻烦，需要同时维护好几个版本。而且如果一个网站有多个（入口），会大大增加架构设计的复杂度。

自适应网页设计还是暴露了一个问题，如果屏幕太小，即使网页能自适应屏幕尺寸，在小屏幕上浏览也会感觉太拥挤。响应式网页设计就是从这个问题衍生出来的概念，它能自动识别屏幕宽度，对网页设计做相应的调整，布局和显示内容都可能发生变化。

自适应体验 响应式体验

CSS 秘密花园

二、响应性基础知识

1. 设置元标签

wport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-Scalable=no">

这段代码的几个参数解释一下：

§width = -width：宽度等于当前设备的宽度

§-scale：初始缩放因子（默认为1.0）

§-scale：允许用户缩放的最小比例（默认为 1.0）

§-scale：允许用户缩放的最大比例（默认设置为 1.0）

§user-：用户是否可以手动放大和缩小（默认设置是否定的，因为我们不希望用户自己放大和缩小页面）

2、媒体查询CSS3媒体查询是实现响应式设计的关键因素，你可以利用媒体查询的特性让页面根据设备的宽度使用不同的CSS块。

当屏幕宽度小于或等于980时，以下CSS规则将生效：

@media (orientation:portrait) and (max-width:460px) {
    .video .innerBox .news a.more {
        display: none;
    }
    .video .innerBox .news span {
        display: none;
    }
    .video .innerBox .news {
        width: 100%;
    }
    .video .innerBox .news ul {
        width: 100%;
        text-align: center;
    }
} 

：|

：

页面在指定输出设备中的可见区域大于或等于宽度

：

除了值的情况外，所有

如果屏幕宽度在 400px 到 600px 之间，选择“加载 CSS”来加载 .css 文件。

3. 百分比布局

3. 响应式页面设计、字体和图像处理

1. HTML5/CSS3响应式页面设计流程

步骤1：确定需要兼容的设备类型和屏幕尺寸类型：包括移动设备（手机、平板）和PC。对于移动设备，在设计和实现时要注意加入手势功能。

屏幕尺寸：包含各类手机屏幕尺寸（横竖皆可）、各类平板电脑屏幕尺寸（横竖皆可）、普通电脑屏幕及宽屏。

第二步：针对确定的尺寸，制作不同的线框原型。需要考虑页面布局如何变化，内容尺寸如何缩放，功能和内容的删除，甚至针对特殊环境做专门的设计。这个过程需要设计师和前端开发人员的密切沟通。

第三步：视觉设计。将图片导入到相应的设备进行一些简单的测试，可以帮助我们尽早发现可访问性、可读性等方面的问题。

相较于传统Web开发，响应式设计页面最终输出的结果更容易因为页面布局、内容大小的变化而与设计稿产生明显差异，这就需要前端开发人员和设计师之间进行更多的沟通。

2. 响应式字体

CSS中不同单位的比较

px：像素。相对长度单位。大小由屏幕分辨率决定。（与媒体查询一起使用）

em：相对长度单位。相当于当前对象内文字的字体大小。如果未设置行内文字的字体大小，则相对于浏览器默认字体大小。em的值不固定，它继承父元素的字体大小。所有未调整的浏览器都满足以下条件：1em=16px。那么12px=0.75em，10px=0.625em。为了简化font-size的转换，需要在CSS中的body选择器中声明Font-size=62.5%，这就使得em值变成了16px*62.5%=10px，所以12px=1.2em，10px=1em，也就是说你只需要将你原来的px值除以10，然后换成em作为单位即可。

rem：CSS3中新增的一个相对单位。和em的主要区别在于，使用rem为元素设置字体大小时，依然是相对大小，只不过是相对于HTML根元素而言的。该单​​位兼具了相对大小和绝对大小的优点，只需修改根元素，即可按比例调整所有字体大小，避免字体大小层层叠加的连锁反应。目前除IE8及之前版本外，所有浏览器都支持rem。对于不支持的浏览器，解决办法也很简单，就是多写一个绝对单位的声明，这些浏览器会忽略用rem设置的字体大小。

%：我们也可以使用百分比来指定大小，表示当前字体相对于浏览器默认字体大小的倍数。这个单位在页面响应式设计中也经常使用。

html{font-size:62.5%;
/* 10÷16=62.5% */
}
body{font-size:12px;font-size:1.2rem ;
/* 12÷10=1.2 */
}
p{font-size:14px;font-size:1.4rem;}

需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器才能优雅降级。其实你也不用太纠结是默认的 font-size: 100% 还是设置为 font-size: 62.5%，如果引入了 CSS 预处理工具，自然使用默认值即可。如果你因为其他原因使用了 font-size: 62.5%，也是可以理解的，你完全可以在 body 中重新设置回你需要的默认 font-size。

3. 响应式图像和视频处理

1. 背景图像 - 媒体查询

2. 图像液化-弹性图像

img, object { max-width: 100%;}
https://www.filamentgroup.com/examples/responsive-images/

3. HTML5

元素

HTML5

该元素可以设置多张图片。

浏览器支持

使用 . 处理标签兼容性

虽然兼容性还不是很好，但是开始使用也不需要等待，下面的类库.js可以很好的解决浏览器兼容问题，使用非常简单，导入即可。

4. 使用标签创建响应式图像

js动态加载大小图片

四、响应式框架

定制化：如果你的网站有大量多样的设计，那么如果还想使用的话，就需要对框架进行修改，因为底层需要复制大量的样式，CSS层次混乱，难以维护。

在某些场合下，它非常有用。例如，如果你想快速搭建一个漂亮的个人网站、企业网站、博客、后端管理界面等，对页面定制要求不高的项目往往更适合后端项目。大多数后端系统兼容浏览器且风格很好，对细节要求不高。或者你可能缺乏网站前端建设经验，考虑浏览器兼容性和无数的设备尺寸，这会帮你解决很大一部分麻烦的问题

本文标题：HTML5/CSS3响应式页面开发总结