文档章节

简单设计自适应网页

kmark
 kmark
发布于 2016/12/06 15:47
字数 1165
阅读 4
收藏 0
点赞 0
评论 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

一天完成把PC网站改为自适应!原来这么简单!

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

hhj187 ⋅ 2016/08/23 ⋅ 0

浅谈Web自适应

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

数通畅联 ⋅ 2016/08/19 ⋅ 0

轻量级企业网站管理系统--Co.MZ

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

秦韵科技 ⋅ 2017/01/16 ⋅ 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 ⋅ 5

自适应设计与网页响应式设计

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的...

phala ⋅ 2015/07/31 ⋅ 0

响应式网页设计1:三步走

响应式网页设计,毫无疑问地变得越来越重要了。如果你还没听说过响应式设计,可以先看看响应式网站。对新手来说,响应式设计听起来可能会有点复杂。 但事实上,它比你想象的简单得多。为了让...

山哥 ⋅ 2012/05/25 ⋅ 0

2014 年 15 款最棒的 HTML&CSS 框架

现在,我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表,跟我们分享你的看法吧:) CSS 框架 1) Toast Toast 是一款让所有设计都尽可能简单的 CSS 框架,但...

oschina ⋅ 2014/01/15 ⋅ 28

响应式和自适应区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http...

前端_牛牛 ⋅ 2016/01/20 ⋅ 2

响应式布局

一、第一步:Meta标签 大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽...

波利beryl ⋅ 2014/11/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 51分钟前 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部