文档章节

简单设计自适应网页

kmark
 kmark
发布于 2016/12/06 15:47
字数 1165
阅读 4
收藏 0

简单设计自适应网页

    怎么样才能快速制作一个自适应网页?怎么让一个网页变自适应?这两个疑问估计是关于自适应网站最普遍的问题。制作自适应网页,首先你要了解什么是自适应布局?自适应布局简而言之,就是一个网站或者一个页面能适应兼容多个终端设备,而不需要再为每个终端做一个特定的版本。其实简单来讲自适应与非自适应的不同就是一个页面不管在什么设备的分辨率下都能自动识别适应,为浏览的用户带来了更好的体验效果。

 

 

1、首先,在网页代码的头部,加入一行viewport元标签。<metaname=”viewport”content=”width=device-width, initial-scale=1″ />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩 放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

2、由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

3、“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。Float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

4、“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

 

 

 

一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是 三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这里关于响应式布局还有个比较好的消息,就是拖动浏览器也可以 触发判断条件,测试的时候你不需要去找一堆手机,只要把自己的浏览器窗口缩小到一定尺寸就可以了。

对于完全没有基础或者刚接触网站建设的你,可以先通过了解网站建设的流程(域名注册;虚拟主机;网页设计)。在通过实践来提高自己的水平,这样你的建站能力就会慢慢提高了。对于一个什么都不懂得小白们,又想快速制作一个自适应网站。那该如何做呢?遂宁网站建设达人小俊浅析道:网站建设不麻烦,麻烦在于你网站做的是否完美。通过交谈与了解他给小编提到,像现在的网络时代,有许许多多的建站软件被开发出来了。对于企业公司与一些私人建站者来讲,是一个很好的帮助。小俊所在的公司在培训新人的时候都采取使用建站宝盒来进行建站。通过他们一连串的实践与探索,他说到:他们使用过很多建站软件,但是对于建站宝盒评价最为高!不管是在软件本身功能方面,还是操作方面,都让人使用起来很方便简单,能快速的到达想要的效果!

 

转载请注明原文出处--------------http://www.iisp.com/ztview/F_hyc14.html?s=hyc

© 著作权归作者所有

共有 人打赏支持
kmark
粉丝 0
博文 77
码字总数 70012
作品 0
珠海
私信 提问
自适应网站设计对百度友好的关键

自适应网站设计对百度友好的关键:添加applicable-device标签 现在很多网站都使用了自适应网页设计(Response-Web-Design),以满足庞大的移动端用户群的需要。但是在技术上设计了自适应的网...

English0523
2016/05/06
0
0
一天完成把PC网站改为自适应!原来这么简单!

网站自适应,很多人都认为是很高级需要很多时间去实现的东西,不愿意去把一个现成的网站改成自适应,宁愿单独另外做一个移动站。我之前觉得实现网站自适应,要设计很多套CSS,并且要结合jQu...

hhj187
2016/08/23
21
0
轻量级企业网站管理系统--Co.MZ

Co.MZ 企业系统是轻量级企业网站管理系统。 各种设备自适应 响应式的网站设计能够对用户产生友好度,并且对于不同的分辨率能够灵活的进行操作应用。 简洁通俗表达就是页面宽度可以自适应屏幕...

秦韵科技
2017/01/16
1K
0
浅谈Web自适应

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端...

数通畅联
2016/08/19
75
0
轻量级企业网站内容管理框架--YFCMF

YFCMF 企业系统 YFCMF是采用ThinkPHP 5.0.7+国外ACE 1.40的UI模板的后台内容管理框架。运行环境:PHP5.4+, MySQL5.0 Git地址:http://git.oschina.net/rainfer/YFCMF(最新版本随时更新) 演示...

rainfer
2016/05/16
7.2K
5

没有更多内容

加载失败,请刷新页面

加载更多

Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
24分钟前
1
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
47分钟前
4
0
在PC上测试移动端网站和模拟手机浏览器的5大方法

总结很全面,保存下来以备不时之需。原文地址:https://www.cnblogs.com/coolfeng/p/4708942.html

kitty1116
今天
5
0
分布式Session共享解决方案

分布式Session一致性? 说白了就是服务器集群Session共享的问题 Session的作用? Session 是客户端与服务器通讯会话跟踪技术,服务器与客户端保持整个通讯的会话基本信息。 客户端在第一次访...

Java干货分享
今天
10
0
开源软件和开源模式面临的生存危机

导读 开源模式可能正面临一场危机。越来越多的开源软件和平台被大型云计算服务商融入自家的云服务体系,并以此获利颇丰,但并不支付费用,也没有对开源社区做出相应的回馈。而实际上,大部分...

问题终结者
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部