`
moneyinto
  • 浏览: 33850 次
  • 性别: Icon_minigender_1
  • 来自: 东台
社区版块
存档分类
最新评论

手机端开发自我总结一

阅读更多

做手机端时为了适应大部分手机,很多都是百分比的,但是在做一个简单模块布局时,需要满屏,这是就发现高度也要使用百分比了,好头疼。

 

直接设置height百分比是不管用的,首先需要设置它的父元素的height值,才能在子元素中是使用height百分比。

 

 

<div style="height: 50px">父元素
    <div class="height: 50%">
        我的高度为25px
    </div>
</div>

 

 

解决了宽高的适应,但感觉手机的分辨率差距很大,比如iPhone4 和 iPhone 6 plus的分辨率差距好大,导致两者的字体视觉感相差很大。一开始以为em能解决问题,可能是我学的不到家,还希望有大神能够指教。

不知道有没有什么好的框架可以解决。总感觉不会字体也用百分比吧,虽然有用,开发估计得疯了。

 

后来想到响应式布局,看到了@media screen and,这里对这个总结一下:

 

@media screen and可以判断设备的width和height,通过判断来改写样式。

 

  • 在link中直接使用,判断是否引用css
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px)">

 

  • 直接写在style中

 

<style>
  @media screen and (max-width: 600px) {
      .class {
          background: black;
      }
  }
</style>

 

@media screen and (max-width: 600px):小于等于600px

 

@media screen and (min-width: 600px):大于等于600px

 

@media screen and (min-width: 600px) and (max-width: 800px):大于等于600px小于等于800px

 

关于这里面的值,我个人测了一下,应该是可视区域的大小,不是直接的分辨率大小。

 

可以通过window.screen.width获取设备的分辨率的width值,然后通过$(window).width()获取可视区域的width值,两者进行比较,我的手机是华为荣耀6,window.screen.width为1080,$(window).width()为980,而用@media screen and判断时,是使用的980的值为界限。

 

 

0
1
分享到:
评论

相关推荐

    【T4320】响应式环保污水处理设备网站模板(自适应手机端).rar

    在这个名为"【T4320】响应式环保污水处理设备网站模板(自适应手机端)"的项目中,开发者已经将这一理念融入到环保污水处理设备的网站构建中。 首先,`favicon.ico` 是一个网站的图标,它通常出现在浏览器的地址栏和...

    开发人员_8_网络公司it人员简历_程序员简历模板 (2)_计算机相关专业.docx

    总结来说,这位求职者是一位经验丰富的WEB前端开发工程师,具备扎实的技术基础和良好的团队协作能力。他的技能点包括但不限于:HTML5、CSS3、JavaScript、DOM操作、BOM、Ajax、JSON解析、PHP、MySQL、Node.js和...

    基于Android的移动学习资源开发设计.pdf

    移动学习资源平台开发设计知识点总结: 1. 移动学习资源平台的背景与意义: 随着移动终端(如智能手机、平板电脑)的普及,移动学习成为了教育领域的一股新潮流。移动学习资源平台让学生可以随时随地通过移动终端...

    考试系统开发.zip

    总结,开发一个考试系统需要全面考虑前端用户体验、后端架构设计、数据库管理、云服务利用以及安全防护等多个方面。只有通过细致的规划和实施,才能构建出一个既满足教学需求,又具有良好性能和安全性的在线考试系统...

    智能手机的安全保密问题

    - **自我保护**:增强个人隐私保护意识,定期检查手机中的应用权限设置,确保只有信任的应用才能访问个人信息。 #### 第五章 总结 智能手机已经成为现代生活中不可或缺的一部分,但随之而来的是日益增加的安全挑战...

    智慧社区项目管理计划书(完整版).docx

    - Android端开发人员负责手机端程序开发和技术文档维护。 - **合作机制**: 团队成员既是积极的建议者,也是负责任的合作伙伴,同时还是决策的制定者。决策需在充分讨论的基础上由团队共同做出,并严格执行。 #### ...

    驾考一点通APP项目.rar

    《驾考一点通APP项目》是一款专为驾驶考试学习者设计的应用...总结,《驾考一点通APP项目》不仅是一个实用的驾驶考试学习工具,也是学习移动应用开发的实战案例,对于提升开发者的技术能力和实际项目经验具有重要意义。

    毕业论文安卓88答题系统(app+server).doc

    再后,通过Java和Android SDK进行前后端开发,实现功能模块;最后,进行系统测试,确保其稳定性和可靠性,并进行总结与展望。 1.4 本文的主要工作 本文主要工作涵盖了以下几个方面:需求分析,详细设计,系统实现...

    计算机专业毕业实习报告-(最新).doc

    实习的主要目的是为了加强理论知识与实践的结合,提高分析问题和解决问题的能力,锻炼实习工作技能,适应社会环境,了解企业对计算机技术的需求,参与实际项目开发,以及自我认知与职业规划。 2. **实习单位**: ...

    ASP在线手机销售系统(论文+源代码+开题报告+任务书).rar

    ASP在线手机销售系统是一个基于ASP.NET技术和C#编程语言构建的Web应用程序,旨在提供一个便捷的在线手机销售平台。这个项目不仅包含了完整的源代码,还有相关的论文、开题报告和任务书,对于学习者来说,无论是进行...

    程序员简历模板 99.docx

    总结起来,这份程序员简历展示了一位具备全面前端开发能力的求职者,包括熟练使用HTML5、CSS3、JavaScript、jQuery、AJAX、JSON等技术,有丰富的项目实践经验,并且对PHP、MySQL、Node.js等后端技术有一定了解。...

    自考网站静态页

    在IT行业中,自考(Self-Study)网站是为个人提供自我学习资源和平台的一种常见形式,特别是对于那些希望通过自学来提升技能或获取认证的人。在这个案例中,"自考网站静态页"指的是一个基于.NET框架开发的网页应用,...

    勤工俭学网站开题报告

    【开题报告——基于ASP.NET与...总结,基于ASP.NET和SQL Server的勤工俭学网站开发,是利用现代信息技术解决传统问题的创新尝试,不仅提升了信息流通效率,还增强了用户体验,对于推动校园与社会的融合有着积极的作用。

    Portfolio:自我介绍和我的简历

    总结来说,"Portfolio:自我介绍和我的简历"项目利用Vue.js和Nuxt.js的强大功能,构建了一个高效、易维护且具有高度自定义性的个人展示平台。通过这样的项目,开发者不仅展示了技术能力,还体现了他们的设计思维和...

    微信小程序对2型糖尿病患者健康管理的应用研究.pdf

    总结来说,微信小程序为2型糖尿病患者提供了一个有效的健康管理工具,有助于患者更好地控制血糖,改善生活质量,也为医疗专业人士提供了一种新型的辅助管理手段。这项研究为微信小程序在医疗健康领域的应用提供了...

    网络营销怎样打动90后?.docx

    商家需关注移动营销,优化手机端用户体验,开发适应手机的应用或服务。 6. **个性化的限量营销**:90后追求独特性,限量版产品往往更能吸引他们。通过限量发行或设定购买门槛,可以制造稀缺感,提高产品的吸引力,...

    某学院网络通识课课程运行报告.doc

    为了适应移动学习的需求,学院还开发了手机端学习应用,让学生可以随时随地访问课程内容,接收通知,参与讨论,方便碎片化时间的学习。 3. 网络通识课运行情况总体分析 通过对选课数据、学生活跃度、课程完成率、...

    美标网站的设计与实现

    总结,美标网站的设计与实现是一个系统工程,涵盖了前端技术、后端技术、用户体验、安全性、性能优化和SEO等多个方面。每个环节都需要精心策划和实施,以创建出既美观又实用的网站。在实际操作中,开发者和设计师...

    ASP.NET房地产管理系统设计源代码

    12. **工作总结**:工作总结通常涵盖了项目开发过程中的经验教训、遇到的问题及解决方案,对于开发者来说是一份宝贵的自我提升材料。 综上所述,ASP.NET房地产管理系统设计源代码涉及到Web开发的多个层面,包括前端...

Global site tag (gtag.js) - Google Analytics