html5怎么制作一个响应式网页?

html-css012

html5怎么制作一个响应式网页?,第1张

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'

}

1、html文件是最常见的网页文件,所谓HTML是超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

2、html文件的编辑非常简单,使用文本编辑器就可以打开,也可以使用editplus,vim,notepad++,ultraEdit 等等编辑工具打开,打开就可以直接看到源码,也可以进行编辑修改。

3、html是网页设计和编程的基础,只要掌握了HTML的基本标签的用法,相对来说还是比较简单的,学习难度并不大的。WEB端编程中,难度较大的在于JavaScript这一块。

4、希望对你有帮助,祝你学有所得。

怎样制作html网页?制作网页的整体思路有:

在进行网页制作的时候,要明白网页的类型以及所需要的材料,并做好一个框架构想,这样利于网页的效果形成,对后期的建设有相应的链接作用和奠基作用。

先布局,再用CSS进行控制。

骨架搭好了,初始化样式。

注意:将CSS的样式导入到外部样式表时,要注意图片的位置,以及对外部样式表的引入。这点可以参照HTML文件和LING&MAODIANSHANG等

1、头部的背景图片的高度128px来自素材的图片高,容器的宽度大小也来自图片宽

2、图片的位置:当你在编写index.html页面代码时,出现一些图片路径时,那么先分清楚哪些是同级目录文件

<!DOCTYPE

html>

<html>

<head>

</head>

<body>

</body>

</html>