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

自适应网页的设计与实现

今天设计了一个页面,如图:但在改变浏览窗口大小之后,网页就变得"不堪入目"了,问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过三种方式:表格

   今天设计了一个页面,如图:



  

   但在改变浏览窗口大小之后,网页就变得"不堪入目"了,
   问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过三种方式:表格(table),框架(frame),层(div)。而自适应的关键地方就是控制缩放,方法就是百分比和像素。
   

设计一个自应用屏幕大小的网页必须要做到几点,我这里简单概述一下,供参考。

A、允许网页能够自动调整宽度。
B、网页元素不使用绝对宽度,用百分比的形式来描述宽度。
C、网页字体不使用绝对大小(px),使用相对大小(em)
D、网页元素位置不限定,使用流动方式布局(float)
E、选择性的加载css样式文件,这是网页自适应屏幕的核心所在,根据不同的屏幕宽度加载不同的css文件来描述网页。
F、网页图片实现自动缩放(max-width:100%),而不要使用 width:300px这种限定图片大小的方式。


推荐阅读
  • 本文探讨了如何在 PHP 的 Eloquent ORM 中实现数据表之间的关联查询,并通过具体示例详细解释了如何将关联数据嵌入到查询结果中。这不仅提高了数据查询的效率,还简化了代码逻辑。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • 本文详细探讨了网站流量统计中常用的三个关键指标:页面浏览量(PV)、独立访客数(UV)和独立IP数(IP)。通过分析这些指标的定义、计算方法及其应用场景,帮助网站运营者更好地理解用户行为,优化网站内容与用户体验。 ... [详细]
  • 探索12个能显著提升iPhone使用体验的隐藏技巧,掌握这些功能后,你会发现生活更加便捷高效。 ... [详细]
  • 在众多不为人知的软件中,这些工具凭借其卓越的功能和高效的性能脱颖而出。本文将为您详细介绍其中八款精品软件,帮助您提高工作效率。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 本文将介绍网易NEC CSS框架的规范及其在实际项目中的应用。通过详细解析其分类和命名规则,探讨如何编写高效、可维护的CSS代码,并分享一些实用的学习心得。 ... [详细]
  • 通过Web界面管理Linux日志的解决方案
    本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法,使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境,还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 提升Tumblr爬虫效率与功能
    本文介绍了对之前开发的Tumblr爬虫脚本进行升级,整合了两个脚本的功能,实现了自动分页爬取博客内容,并支持配置文件以下载多个博客的不同格式文件。此外,还优化了图片下载逻辑。 ... [详细]
  • 分享一个简化版的Silverlight链接图项目:Link Map Simplified
    本文介绍了一个使用Silverlight开发的可视化工具,主要用于展示和操作复杂的实体关系图(Graph)。该工具在犯罪调查系统中得到了广泛应用,帮助用户直观地获取和理解相关信息。 ... [详细]
  • 在网页设计中,如何将文本或图片进行水平和垂直居中是常见的需求。本文将详细介绍使用CSS和JavaScript(包括jQuery)实现DIV元素居中的多种方法,并提供实用的代码示例。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 网易严选Java开发面试:MySQL索引深度解析
    本文详细记录了网易严选Java开发岗位的面试经验,特别针对MySQL索引相关的技术问题进行了深入探讨。通过本文,读者可以了解面试官常问的索引问题及其背后的原理。 ... [详细]
author-avatar
苏格兰的秋天
一枚在创业路上坚持走下去的人。。。。
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有