1、手机的响应式布局,所有的单位用rem来表示。

  如:设计稿的宽度是750,则html标签的font-size=屏幕宽度/7.5。那么在网页中的尺寸 = 设计高上实际的尺寸/100.

把下面的代码作为一个单独的resize.js文件,手机的页面引用这个文件。

  1. $("html").css({"font-size":$(window).width()/7.5});
  2. $(window).resize(function(){
  3. $("html").css({"font-size":$(window).width()/7.5});
  4. });

2、移动端单位rem作为单位,一定要注意,换算后字体的px单位一定不能小于12px。不然的话,rem值非常小,字体还是会有12px的。当屏幕比较小,没什么影响,屏幕一大起来,字体就会变得很小,于其他的元素不统一了。

3、rem单位和em结合起来使用会更好。有字体的标签里高度、行高使用em的有点非常明显。比如 : input标签,里面给文字设置大小,如果文字的高度比input高,溢出来的就会被切掉,字体只有一半。用em做单位就不会出现这种问题。基本上表单、表格、button的高度都用em做单位比较好。

4、标签的高度和文字的高度有比较明显倍数关系,使用em作为单位,页面的自适应会非常好。

5、手机端适配,开发的时候需要测试 机型(谷歌浏览器中的模拟手机)

  a、iPhone6

  b、iPhone5

  c、Nexus5

App响应式布局的更多相关文章

  1. 【Win10开发】响应式布局——AdaptiveTrigger

    接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...

  2. WinForm响应式布局设计实践

    引言 创建响应式WinForm应用程序并不那么简单. 响应式布局,在此我指的是应用程序在不同屏幕分辨率下的可用性. 对于WinForm应用程序,我们需要明确地根据分辨率来调整控件的大小和重新定位. 虽 ...

  3. 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板

    本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...

  4. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  5. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  6. web前端响应式布局,自适应全部分辨率

    写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...

  7. Power Apps 创建响应式布局

    前言 我们都知道Power Apps作为低代码平台,最大的优势就是各个设备之间的兼容性,尤其是自带的响应式布局,非常好用. 这不,我们就为大家分享一下,如何使用Power Apps画布应用,创建响应式 ...

  8. 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  9. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

随机推荐

  1. python--闭包函数、装饰器

    先来点补充. x= def foo(): print(x) x= foo() 结果: x= def foo(): global x x= print(x) foo() print(x) 结果: x= ...

  2. sql-主键、外键、索引

    SQL的主键和外键的作用: 外键取值规则:空值或参照的主键值. (1)插入非空值时,如果主键表中没有这个值,则不能插入. (2)更新时,不能改为主键表中没有的值. (3)删除主键表记录时,你可以在建外 ...

  3. Git GUI使用方法【转】

    前言 之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中的成本,但是搜索了一下并 ...

  4. (转)Android Studio解决unspecified on project app resolves to an APK archive which is not supported

    出现该问题unspecified on project app resolves to an APK archive which is not supported as a compilation d ...

  5. Linux常用命令的使用方法

    Linux 命令大全 Linux 命令大全 1.文件管理 cat chattr chgrp chmod chown cksum cmp diff diffstat file find git gitv ...

  6. bp网络全解读

    https://blog.csdn.net/weixin_40432828/article/details/82192709

  7. git rollback

    http://stackoverflow.com/questions/1616957/how-do-you-roll-back-reset-a-git-repository-to-a-particul ...

  8. find pattern

    daniel@daniel-mint ~/msf/metasploit-framework/tools $ ruby pattern_create.rb 2000 Aa0Aa1Aa2Aa3Aa4Aa5 ...

  9. upc组队赛6 Canonical Coin Systems【完全背包+贪心】

    Canonical Coin Systems 题目描述 A coin system S is a finite (nonempty) set of distinct positive integers ...

  10. upc组队赛6 Bumped!【最短路】

    Bumped! 题目描述 Peter returned from the recently held ACM ICPC World finals only to find that his retur ...