热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

移动设备网页开发的经验

2019独角兽企业重金招聘Python工程师标准左侧固定宽度,右侧自适应因为手上没要紧事情,今天哲哥让我帮忙处理下前端的事情,拿到p

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

左侧固定宽度,右侧自适应

因为手上没要紧事情,今天哲哥让我帮忙处理下前端的事情,拿到psd之后,感觉有点头大,以前虽然写过前端,可那是很久以前的事情了。一般情况下,能抄就抄,导致自己前端技能几乎荒废。但是没办法,还是得写,以后再次面对情况,可以自己处理了。

 

1、首先是面对psd,把图片取出来,这个不再表述,在杨明的帮助下,自己初步掌握了方法(网上有了解到可以用imageready直接导出,因时间关系,没有实践,暂时记录,有兴趣的可以去试试)。

 

2、这时候,可以动手制作html页面了。冰哥首先跟我提了几个要点:这个页面是面向移动设备的,所以要兼容多种显示设备,比如平板、手机。因为差距很大,各分块尽量使用百分百,字体尽量使用em,这样,可保持总体一致。

在制作的过程中,我遵循使用百分百的方法去制作,可标题部分我发现不能简单使用百分百,因为标题只两个字,如果真按百分百分配,效果不兼容各种设备。

我为这个问题纠结了半天,到群里面问了,也没有要到自己要的答案。冰哥比较忙,也只能自己调试。

不过,当时有个人给了这样一种参考答案

084111_cIMD_1982767.jpg

试了下,依然不行,不过人家的min-width,max-width这种思想,我是第一次看到,也放这里了。

 

回家之后,发现这个问题不就是:左侧固定,右侧自适应吗,然后,在网上搜了下,就解决了这个小问题。

 

3、其他小问题。

文本区域,高度不能使用百分百,这个无效,暂时先记录。

 

 

4、自己的习惯问题

没有使用css,没有样式与内容相分离,自己的这个习惯,一定得改。

 

 

 

 

 

总结:

①在移动设备中,几乎可以不考虑兼容(谷歌浏览器的selectoption部分,字体无效,但是火狐浏览器正常,虽不影响使用,但影响美观)。

②在

③总感觉自己制作的页面离效果图差了很多,每个部分差了点,就导致整体效果差很多。

高度、背景、宽度等都直接影响最终效果。

 

路漫漫其修远兮,吾将上下而求索!

 

 



转:https://my.oschina.net/u/1982767/blog/292272



推荐阅读
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
  • 利用PaddleSharp模块在C#中实现图像文字识别功能测试
    PaddleSharp 是 PaddleInferenceCAPI 的 C# 封装库,适用于 Windows (x64)、NVIDIA GPU 和 Linux (Ubuntu 20.04) 等平台。本文详细介绍了如何使用 PaddleSharp 在 C# 环境中实现图像文字识别功能,并进行了全面的功能测试,验证了其在多种硬件配置下的稳定性和准确性。 ... [详细]
  • 本文深入探讨了 HTML 中的 `margin` 属性,详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念,还重点讨论了垂直外边距合并现象,并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例,帮助读者全面理解 `margin` 的使用技巧和常见问题。 ... [详细]
  • MySQL:不仅仅是数据库那么简单
    MySQL不仅是一款高效、可靠的数据库管理系统,它还具备丰富的功能和扩展性,支持多种存储引擎,适用于各种应用场景。从简单的网站开发到复杂的企业级应用,MySQL都能提供强大的数据管理和优化能力,满足不同用户的需求。其开源特性也促进了社区的活跃发展,为技术进步提供了持续动力。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
  • 本课程详细介绍了如何使用Python Flask框架从零开始构建鱼书应用,涵盖高级编程技巧和实战项目。通过视频教学,学员将学习到Flask的高效用法,包括数据库事务处理和书籍交易模型的实现。特别感谢AI资源网提供的课程下载支持。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 成功实现Asp.Net MVC3网站与MongoDB数据库的高效集成
    我们成功地构建了一个基于Asp.NET MVC3框架的网站,并实现了与MongoDB数据库的高效集成。此次更新不仅完善了基本的创建和显示功能,还全面实现了数据的增删改查操作。在创建功能方面,我们修复了之前代码中的错误,确保每个属性都能正确生成。此外,我们还对数据模型进行了优化,以提高系统的性能和稳定性。 ... [详细]
  • 本章节从商业数据分析与挖掘的角度,深入探讨了特征工程的关键技术和应用方法,包括数据预处理、特征构建、特征提取及特征选择。详细阐述了如何系统地构建用于分析的结构化数据,为全栈开发提供了坚实的基础。 ... [详细]
  • 2019年后蚂蚁集团与拼多多面试经验详述与深度剖析
    2019年后蚂蚁集团与拼多多面试经验详述与深度剖析 ... [详细]
  • 宏基因组学经典文献重现(一):利用ggplot2进行散点图可视化分析
    宏基因组学经典文献重现(一):利用ggplot2进行散点图可视化分析 ... [详细]
  • Django框架下的对象关系映射(ORM)详解
    在Django框架中,对象关系映射(ORM)技术是解决面向对象编程与关系型数据库之间不兼容问题的关键工具。通过将数据库表结构映射到Python类,ORM使得开发者能够以面向对象的方式操作数据库,从而简化了数据访问和管理的复杂性。这种技术不仅提高了代码的可读性和可维护性,还增强了应用程序的灵活性和扩展性。 ... [详细]
  • 在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ... [详细]
  • 在使用关系型数据库时,通常需要通过用户名和密码进行身份验证才能访问数据。然而,MongoDB默认情况下并不强制要求这种身份验证机制,使得用户无需凭据即可访问并执行各种操作。虽然这一设计简化了初学者的上手过程,但也带来了显著的安全风险。为了提升MongoDB的连接安全性,本文将探讨多种策略与实践,包括启用身份验证、配置网络访问控制、加密通信以及定期审计安全设置,以确保数据库的安全性和数据的完整性。 ... [详细]
  • voc生成xml 代码
    目录 lxmlwindows安装 读取示例 可视化 生成示例 上面是代码,下面有调用示例 api调用代码,其实只有几行:这个生成代码也很简 ... [详细]
author-avatar
小丶长弓_568
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有