热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

网站建设概念之

网站建设     让我们假设您拥有最新版本的智能手机,具有全方位的创新应用,时尚的设计和惊人的性能。你迫不及待想要尝试,但似乎有一个问题。有些网页似乎没有调整到你的手机屏幕,甚至看
网站建设

网站建设

       让我们假设您拥有最新版本的智能手机,具有全方位的创新应用,时尚的设计和惊人的性能。你迫不及待想要尝试,但似乎有一个问题。有些网页似乎没有调整到你的手机屏幕,甚至看起来像是坏了。怎么会?

  问题不在您的设备中,而是在这些网站设计中。问题是在网页设计过程中是否应用了流体,自适应或响应式设计。
  这三种方法有什么区别?
  我们将在这里详细解释它们,所以请留在这里。
  定义不同的设计类型
  您可能听说过响应式设计,尽管您可能不是网页设计术语的专家。另一方面,如果你自己是网页设计师,你知道它现在几乎是一个标准。
  但是,对网站的响应意味着什么呢?流畅和自适应设计代表什么?
  要理解这些类型,我们必须首先定义固定设计。
  固定页面布局
  具有固定或静态宽度布局的页面被设计用于特定的预定宽度,并且它们不会改变,无论显示器宽高比或观看者具有的屏幕尺寸。宽度以像素值指定,最常见的宽度为960像素,并且不响应不同的屏幕大小。
  这种网页设计已不再使用,但仍然有固定的网页。当您在查看移动是手机上的网站时出现水平滚动条,或者只有一半页面可见,图片被裁剪,书写内容无法追踪时,您可以识别它们。这可能肯定会损害页面概述和用户体验,这就是固定布局不再那么受欢迎的原因。
  流体设计
  与固定布局相反,流体或液体设计的宽度指定为百分比。它基于相对单位和比例宽度,使页面可扩展,并可根据不同的屏幕尺寸进行调整。
  标准屏幕尺寸曾经是1024×768像素,但现在有很多人拥有更高分辨率的屏幕。这就是流体设计非常有用的原因。
  每当屏幕尺寸发生变化时,流体布局的元素就会分布在相同的空间百分比上。内容块,图像和其他元素将根据屏幕大小拉伸或缩小。
流体VS自适应VS响应式设计
  为了使网页设计流畅,您应该知道如何将其合并到代码中。
  自适应设计
  自适应设计是在创建具有特定设备和屏幕尺寸的网站或主题的过程。这意味着专门为iMac创建,或者为13.3英寸笔记本电脑,iPhone,Galaxy手表或具有特定显示尺寸的任何其他设备创建。
  如果设计是自适应的,则意味着实际上创建了几个版本的设计,每个版本都按特定尺寸制作。但是,布局不是由自适应设计精确定义的,而是在特定的屏幕尺寸范围内。
  与流体设计相比,自适应意味着在功能用户界面中更加确定并且具有积极的用户体验。另一个优点是加载自适应页面的速度,因为没有太多的调整和页面应该快速加载。
流体VS自适应VS响应式设计
  响应式网站设计
  为各种屏幕尺寸设计单独的设计可能比固定页面布局更好,这是肯定的。但是,这也是耗时且耗能的。这就是响应式网页设计进入现场的地方。
  作为灵活网格,流畅布局和媒体查询的智能使用的组合,针对不同分辨率定义了特定于媒体的CSS,响应式设计最近成为设计师的最爱之一。
  响应式网站使用查询来控制内容,因为它根据查看者正在使用的设备向上或向下扩展。它还响应用户的行为和设备的方向,在使用这一设计,能够更好的考虑到《包容性设计:使每个人都可以访问网站》。
  响应式设计基于所谓的集合容器和断点,它们在范围内划分可能的屏幕大小并相应地调整页面元素。因此,在大型桌面显示器和小型手机显示器上,布局可能看起来完全不同。这种类型的设计也有利于避免屏幕上的空白空间。
流体VS自适应VS响应式设计
  哪一个选择?
  很久以前只有一个典型尺寸的PC显示器。现在,设计师面临着设计台式机、笔记本电脑、平板电脑、阅读设备、手表,当然还有各种形状和大小的手机的挑战。
  所以,是的,如果您选择要应用于您作为设计师工作的每个项目的设计类型,它会变得非常混乱。它应该是自适应的还是响应的?
  我们建议先考虑网站目标,然后再决定设计类型。例如,如果您打算构建一个没有移动版网页但是原生Android或iOS应用程序的网站,那么自适应设计可能是一个很好的解决方案。
  另一方面,始终要记住,响应式设计在当今世界几乎是必不可少的,而且许多客户实际上期望为他们的网站提供响应式设计。所以,你不想让他们失望,是吗?
  除此之外,这些类型中的一些通常是组合的。例如,有人可能会说每个响应式设计都是流动的,但流体设计并不是响应式的。
  结论
  如您所见,这完全取决于屏幕尺寸和页面布局。
  因此,如果您的最新手机具有非标准显示宽高比或不寻常的分辨率,您可能会发现很难调整某些网页,视频和应用以适合您的屏幕。考虑到长宽比为18:9的手机最近涌入市场,与标准化的16:9相比,但视频甚至网站的大多数尚未调整,很明显设计中的一些变化应该是制作。最好的解决方案是通过响应式设计自动调整它们。
流体VS自适应VS响应式设计
  总而言之 – 如果您希望您的网站功能齐全、可用、易于接近,并且非常愉快地进行交互,您可能希望选择响应式设计。现在,它可能被称为您的设计项目的理想解决方案。
  我们还可以补充说,响应式设计将成为流体与自适应与响应式设计的三角形战斗的胜利者。

推荐阅读
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
  • 3DSMAX制作超现实的体育馆模型
    这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • 吴石访谈:腾讯安全科恩实验室如何引领物联网安全研究
    腾讯安全科恩实验室曾两次成功破解特斯拉自动驾驶系统,并远程控制汽车,展示了其在汽车安全领域的强大实力。近日,该实验室负责人吴石接受了InfoQ的专访,详细介绍了团队未来的重点方向——物联网安全。 ... [详细]
  • 探讨如何在映射文件中处理重复的属性字段,以避免数据操作时出现错误。 ... [详细]
  • Fiddler 安装与配置指南
    本文详细介绍了Fiddler的安装步骤及配置方法,旨在帮助用户顺利抓取用户Token。文章还涵盖了一些常见问题的解决方案,以确保安装过程顺利。 ... [详细]
  • 网络流24题——试题库问题
    题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 在Notepad++中配置Markdown语法高亮及实时预览功能
    本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能,包括必要的插件安装和设置步骤。 ... [详细]
  • 本文介绍了如何通过安装 sqlacodegen 和 pymysql 来根据现有的 MySQL 数据库自动生成 ORM 的模型文件(model.py)。此方法适用于需要快速搭建项目模型层的情况。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
author-avatar
幽咽小香
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有