在HTML头部增加viewport标签：在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。下面是自适应网页设计的方法有哪些相关内容，希望对您有所帮助。
1、在HTML头部增加viewport标签
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则
例如使用如下的代码，可以让屏幕宽度低于480像素的设备(如iPhone等)，网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体(非必要)
在HTML页面上不要使用绝对字体(px)，而要使用相对字体(em)，对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
5、图片自适应(非必要)
img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; }
css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;
根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题(更新：经过网友提示，在导航栏divNavbar的样式里，加入 white-space:nowrap; overflow:hidden; 即可解决这个问题)。
总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。
网页设计有哪些表现手法
1、对比
设计就是规则中加入一点变化，从而达到突出重点的作用。大标题我们为了显眼通常都是加粗加大使用，小部分描述才使用纤细的。即使保持字体上的统一，改变字体样式，又让字体不至于太平淡缺乏变化。另外，也不仅仅是只有字体才有对比，网页上各个元素之间，也存在对比关系，对比越夸张效果越强烈。
2、几何图案
使用重叠几何图案的技术，可以实现更有趣的视觉效果。设计师可以添加各种各样简单的样式和形状。
3、插画
网页的设计趋势更新换代，但是使用插图始终是给页面一个独特外观和风格的好方法。
4、杂志排版
纸质媒体的平面设计和信息排版较网络媒体有着更悠久的历史，相对而言他们的经验沉淀更加专业;随着网络硬件的提升，网页在视觉形式表现上的束缚也越来越少，这样的环境给网页设计师带来了更多元化的设计学习空间;杂志版式中简约轻薄的形式感正好契合了现在多终端的网页自适应设计。
所以向杂志排版学习，是网页探寻新形式的一个开始。
5、色彩
选择鲜艳的配色，对于背景设计来说可是非常大胆而又独特的。通过这些颜色的背景，将用户引导至设计全体，添加了具有视觉效果关注点的同时创造出了留白空间，能够达成一举多得的效果。
6、灰色的运用
加入少许灰色，你可以很轻松的在网页上实现简约风格。作为平凡的白色背景的代替，在背景上加入淡灰色的网页正在逐渐增加。灰色背景最棒的地方就是：不管色彩多么丰富，不管是暖色还是冷色的图片都能很好的表现出来，在品牌颜色或图像周围使用灰色与之调和也能给人留下不错的印象。还有，在平面的色彩上使用淡黑的灰色作为阴影也是很不错的。
7、扁平化风格
扁平化设计依然占据主流，从某种程度上而言，是因为它同响应式设计有着极高的契合度，这也是在过去几年间的逐步变化而造就的结果。
8、抄现实
简单意义上说就是抄袭现实中存在的事物，这种手法多用于活动主题页和游戏页面。
网页设计规范
1、在不同设备上采用相似的设计
用户可以通过不同类型的设备访问你的网站，这些设备包括：电脑、平板、手机、音乐播放器、甚至是智能手表等。无论用户使用什么设备访问你的网页，确保他们具有类似的体验，这是用户体验设计中的一条重要标准。
2、导航的设计要简单易用、清晰明了
导航设计是网页可用性的基石。记住，如果用户在你的网站里找不到导航，那么无论你的网站有多少都没用用。这也是导航设计要遵循以下原则的原因：
简单。每个网站都应该有尽可能简单的结构。
清晰。导航的每项对用户而言，都应该是清楚的。
一致。系统的导航页在每一页中都应该是相同的。
用户以最少的点击次数，最快地到达他们想要浏览的网页。这才是导航设计的目的。
3、 改变访问过的链接的颜色
链接是导航的一个关键因素。假如用户点击过的链接没有改变颜色，很可能导致用户多次点击同一个链接。
如果用户知道自己过去访问的链接和现在还未访问过的链接，那么用户会更容易决定自己下一次要点击什么。
4、让页面浏览变得更容易
用户浏览我们的网页时，并不是通读所有的内容，而是快速地扫描整个网页。因此，如果用户来到这个网站，是为了寻找特定的内容或者是完成某个任务，那么他们会先浏览整个网页，直到用户找到了自己想要去的地方。因此，作为网页设计者的我们，应该通过设计网站可视化的层级架构帮助这些用户尽快达成自己的目的。可视化的层级架构意味着网页上每个元素的摆放或呈现都具有权重(比如说，我们的设计决定了用户先看到哪个，再看到哪个，最后看到哪个)。
我们在设计网站时，要确保网页标题、登录注册按钮、导航栏或其它同等重要的元素放在用户很容易看到的地方，以减少用户寻找的时间。
5、仔细检查所有的链接
当用户点击网站上的一个链接，界面上却出现404的错误页面时，用户很容易变得沮丧。当用户在网站上寻找内容时，他们希望自己点击过的每个链接都是自己正在寻找的那个，而不是出现404的错误页面、或者点进去后，却发现不是自己寻找的那个页面。
6、确保能点击的元素让用户看起来就能点击
一个物体的样子会告诉用户如何使用它。看起来像按钮或链接的视觉元素却不能点击，很容易困扰用户，这些视觉元素包括：文字下划线并不代表链接、拥有动画效果的元素也不是超链接。用户想要知道界面上哪些区域是纯静态内容，哪些区域是可以点击的，让可以点击的元素明显一点。
网站着陆页应该如何设计
第一，着陆页的顶端。
着陆页必须要有网站的logo，如果是企业网站，那就需要布置企业的logo，客人能够据此一看便知你的网站是什么，进而能够清楚的传达给用户你的网站是做什么的，能够为用户提供什么样的服务。另外在logo的一侧还需要放置网站的定位语，这样就能够和行业进行一定的区分，让用户明白你的网站和同行之间的区别，接着右边可以放置网站的联系方式，通常是企业的400电话，这能够展现出企业实力，让用户觉得这是大企业。
第二，着陆页要配置相应的Banner图。
对于企业网站而言，Banner上可以配置企业曾经的一些成功案例，或者企业的产品，抑或是企业的核心优势。这些图一定要设计成高大上，同时要注意图和网站内容的相关性，有的企业网站的着陆页就在这里出现了只要好看，不突出和企业的相关性，就显得不够专业大气，进而影响到企业的形象。
第三，接下来就是要重点介绍产品大类。
绵阳网络推广认为对于一个企业而言会存在着很多产品，这些产品又分属不同的大类，而在着陆页上就要重点展现这些大类，然后再由这些大类列出相应的产品名称，同时每个产品下面有一小段简要介绍，用户可以通过这些介绍点击相应的文字，进而打开这些产品的详细页，也即是说，要发挥出企业网站着陆页的导航功能。
第四，要发布一定的荣誉以及相应的证书。
对于企业网站而言，这是展现企业的最佳平台，着陆页更是展现中的重点环节，用户大多是通过着陆页浏览网站的内部内容，如果你在着陆页上展现的内容充分证明你的网站的优势，并且得到了权威部门的认证，这样就具有更好的说服力。也就是说，在着陆页上要尽可能的列出企业曾经所获得荣誉，而且这些荣誉都是可以查询的，千万不是虽然有着荣誉，但是却不能够说服用户，这就给用户带来造假的疑问，反而不利于提升网站的权威度。
第五，要布置相应的联系方式，尤其是互动的联系方式。
增强和用户的互动，解决用户提出的问题，从而引导用户点击相应的内容，这样的在线服务能够有效的提升服务水平，而且通过和用户的良好互动，也有助于增强网站的黏贴力，进而为网站培养更多的忠诚用户。
总而言之，网站着陆页对于吸引用户，提高转换率具有重要的作用，我们在努力提升着陆页的权重的同时，还需要注意增强着陆页的设计体验度，增强用户的体验度，进而为网站的成功奠定重要基础。
