企业做网站的响应式网站的设计流程

 2023-12-25  阅读 5  评论 0

摘要:一个普通的自适应显示的三栏网页,当用不同的终端来查看这个页面时,会根据几种线端来显示不同的样式。在电脑上是三列,在iPad上也应该是三列,在大屏手机上是三行,在屏幕小于320px的手机上只显示主要内容,隐藏了次要元素。我们知道,在不同的设备中,浏览器的窗尺寸可能是

企业做网站的响应式网站的设计流程

一个普通的自适应显示的三栏网页,当用不同的终端来查看这个页面时,会根据几种线端来显示不同的样式。在电脑上是三列,在iPad上也应该是三列,在大屏手机上是三行,在屏幕小于320px的手机上只显示主要内容,隐藏了次要元素。
我们知道,在不同的设备中,浏览器的窗尺寸可能是不同的。如果只针对某种窗口尺寸来制作网页,在其他设备中呈现该网页时就会产生很多问题:如果针对不同的窗口尺寸制作不同的网页,则要制作的网页就会太多。为了解决这个问题,在CSS3中加入了MedisQueries模块(媒体查询),它是制作响应式布局的-个利器,使用这个工具我们可以非常方便、快捷地设计出各种丰富的、实用性强的界面。在MediaQueries模块中允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型选择应该使用的样式。换句话说,允许在不改变内容的情况下,在样式中选择一一种页面的布局以精确地适应不同的设备,从而改善用户体验。网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式,然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。
到目前为止,MediaQueries模块得到了Firefox、SafariChrome及Opera浏览器的支持。移动终端上一-般都是对CSS3支持比较好的高级浏览器,不需要考虑响应式布局的媒体查询兼容问题。IE8及以下版本浏览器不支持媒体查询,虽然也有很多种解决方案,几乎都是通过下载JavaScript插件来实现,但没有必要去解决这个问题,因为小屏幕显示都是在移动端使用,IE低版本只要按正常PC端页面显示页面布局即可。
在开发中只要拖动浏览器就可以触发判新条件,测试的时候不需要去找一堆手机,只要把自己的浏览器窗口缩小到定尺寸就可以了。另外,还有一个不错的在线Web工具
(开源的,直接从hp:gi//conioloieiponisvaer下载),里面提Responsivator真了根不同尺寸的屏幕的展示发果,只需要提供个UR,出可以看到网站在不同服幕中的显示效果。网站式企业做网站

关于

版权声明:xxxxxxxxx;

原文链接:https://lecms.nxtedu.cn/yunzhuji/143398.html

发表评论:

验证码

管理员

  • 内容1196557
  • 积分0
  • 金币0
关于我们
lecms主程序为免费提供使用,使用者不得将本系统应用于任何形式的非法用途,由此产生的一切法律风险,需由使用者自行承担,与本站和开发者无关。一旦使用lecms,表示您即承认您已阅读、理解并同意受此条款的约束,并遵守所有相应法律和法规。
联系方式
电话:
地址:广东省中山市
Email:admin@qq.com
注册登录
注册帐号
登录帐号

Copyright © 2022 LECMS Inc. 保留所有权利。 Powered by LECMS 3.0.3

页面耗时0.0122秒, 内存占用341.4 KB, 访问数据库18次