HTML5 制作响应式网页,首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例,讲述如何制作响应式网页。
1、选定基本设计尺寸,一般以1080为基准。确定响应式web设计的应用场景之后,和美工(或设计师)沟通,之前,一般需要美工出几套主流移动设备屏幕分辨率的设计图,现在,使用流式布局以及rem等可以使用一套设计图,以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后,前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来,Fireworks cs6切图更快,但是Fireworks有时会有图片失真的情况发生,所以,有时需要使用PS进行配合,PS有切片工具可以专门用来切图。
具体代码:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
}
借用百科一句话:响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局就是可以,适应多种设备的网页,比如电脑端和移动端 可以共用同一套CSS。不需要为单独的设备而开发相应程序
1.自然布局。
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点(左上角)为参照点。
由于外层是position:relative,所以里层是absolute的话,则会以外层的左上角为位移参考对齐。当然外层只写position:relative,写上left,top这两个值,则表示以:以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是,只是一个position:absolute外层没有position:relative,这时会找寻那个点为参考呢?这时候的原则是:如果某父级元素中有relative者,则以某父级元素为参考原点,如果没有position:relative,则以body为参考原点。如果position:absolute外层没有relative时,这两个布局上是没有区别的。
当然最后一种情况是:外层是:position:absolute里边是position:relative,那会是什么情况?按着原来的原则,absolute会参考body为布局原点,relative会参考他本来应该在的位置为布局原点,这时候其实就是参考外层左上角为布局原点。