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

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

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

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

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. 2019牛客多校第四场D-triples I 贪心

    D-triples 题意 给你一个\(n\),问至少有几个数或运算起来可以等于\(n\),并且输出数量和这个几个数.题目说明给的\(n\)一定符合条件(不会输出\(n= 1\) 之类不存在情况). 思 ...

  2. Python基础教程(012)--排查手误错误

    前言 排查由于手误书写错误的方法 内容 手动输入错误的时候,颜色是红色 函数名称写错 1,颜色不一样 2,nameError错误 掌握知识点 学会在写代码的时候排查错误

  3. AcWing 231. 天码 (容斥)打卡

    题目:https://www.acwing.com/problem/content/233/ 题意:给你n个不同的数,让你选取一个四元组,gcd为1,让你求这样的四元组数量是多少 思路:我们单独直接去 ...

  4. Selenium之Android使用学习

    20140507 Selenium一般用在web自动化上,为什么Android上也能用呢? 如图,手机端和DB联动:手机端的客户端给server发数据流,进行增删改查操作,这种写数据用update更新 ...

  5. [CSP-S模拟测试]:E(贪心)

    题目传送门(内部题48) 输入格式 第一行一个整数$n$.接下来$n$行每行两个整数$x_i,y_i$. 输出格式 一行一个整数表示答案. 样例 样例输入$1$: 23 72 5 样例输出$1$: 样 ...

  6. 剑指offer---3、按之字形顺序打印二叉树

    剑指offer---3.按之字形顺序打印二叉树 一.总结 一句话总结: |||-begin 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照 ...

  7. UML的类型

    分类 UML从考虑系统的不同角度出发,定义了用例图.类图.对象图.包图.状态图.活动图.序列图.协作图.构件图.部署图等10种图. 常见的UML图有用例图(Use Case Diagram).类图(C ...

  8. 腾讯云ubuntu16.04安装MySql5.7未提示密码设置且无法登陆解决

    一.安装 sudo apt-get update sudo apt install mysql-server 二.修改密码 1.由于安装过程中未提示要设置密码,且使用sudo mysql_secure ...

  9. SPSS输出的结果都要写到文章中吗

    SPSS输出的结果都要写到文章中吗 经常有人问到,SPSS输出的结果都要写到文章中吗?文章中应该写什么呢?比如,均值.中位数.众数.标准差.百分位数.最小值.最大值等等,都要出现在文章中吗?洋洋洒洒那 ...

  10. list列表操作(创建、增加、删除、取值)

    list ####(一)列表的创建[].追加(append,extend,insert).删除(remove.del.poop).修改 ##创建一个空列表.一个字符串列表.一个数字列表 lis0 = ...