如何做出H5相应式网页设计-

这次给大家带来如何做出H5相应式网页设计，H5做出相应式网页设计的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来如何做出H5相应式网页设计，H5做出相应式网页设计的注意事项是什么，下面就是实战案例，一起来看一下。

本文介绍了HTML5相应式（自顺应）网页设计的实现，分享给大家，概括如下：

首先步：在网页代码的头部，参加一行viewport元标签

viewport是网页默许的宽度和高度，上面这行代码的意思是：网页宽度默许等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流阅读器都支撑这个设定，包含IE9。关于那些老式阅读器（主如果IE6、7、8），需要运用css3-mediaqueries.js

第二步：（注意）不运用绝对宽度，字体大小

width:auto; / width:XX%;

第三步：（注意）字体大小

字体大小是页面默许大小的100%，即16像素

字体不要运用绝对大小"PX"，要运用相对大小“REM”

第四步：活动布局

"活动布局"的含义是，各个区块的位置都是浮动的，不是牢固不变的

其益处是，要是宽度太小，放不下两个元素，背面的元素会主动滚动到前面元素的下方，不会在水平标的目的overflow（溢出），以免了水平滚动条的涌现

第五步：选中加载CSS

"自顺应网页设计"的中心，就是CSS3引入的Media Query模块。主动探测屏幕宽度，然后加载响应的CSS文件

 
 
 
    
 
        
Home
 
        
AAA
 
        
BBB
 
        
CCC
 
        
DDD
 
    
 
     
        Home 
        AAA 
        BBB 
        CCC 
        DDD 
     
 

信赖看了这些案例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！

相干浏览：

H5如何实现拖放功能

H5的块级标签汇总

对于老版本的阅读器不兼容H5和C3的处置办法

以上就是如何做出H5相应式网页设计的细致内容，更多请关注 百分百源码网 其它相干文章！