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. python--MySql(外键约束、多表查询(*****))

    两张表之间的关系: 一对一(两张表可以合并成一张表) 一对一用的比较少,多对一对外键设置unique约束可以实现一对一 一对多(例如:每一个班主任会对应多个学生 , 而每个学生只能对应一个班主任) 多 ...

  2. bzoj 3011

    传送门: http://www.lydsy.com/JudgeOnline/problem.php?id=3011 一想到这个第一反应是树形dp,然后10^18 (' '    ) 所以我直接搞了一个 ...

  3. centos6 sersync2使用

    接收端rsyncd搭建 http://www.cnblogs.com/hanxiaohui/p/8675409.html 推送端sersync2使用 安装 源码包D:\share\src\sersyn ...

  4. 【Shiro】六、Apache Shiro Session管理

    1.Session的介绍 关于Session 会话:从启动一个Session到关闭这个Session作为一个会话,是对客户端和服务器端交互的一种封装,带有时效性 会话的产生: 一般从容器中产生 Web ...

  5. Toast 使用方法大全

    原文地址:http://daikainan.iteye.com/blog/1405575 Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户, ...

  6. VPS性能测试:CPU内存,硬盘IO读写,带宽速度,UnixBench和压力测试

    现在便宜的VPS主机越来越多了,一些美国的VPS主机甚至给出1美元一月的VPS,堪比虚拟主机还要便宜,巨大的价格优势吸引不少人购买和使用,而近些年来国内的主机商也开始意识到便宜的VPS对草根站长的诱惑 ...

  7. Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效

    文章目录 广告: 背景 发现 解决 get技能 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.git ...

  8. Linux 常用指令总结

    一. 与时间有关的参数: 1.find 基本语法参数如下: find [PATH] [option] [action] -mtime n : n为数字,意思为在n天之前的“一天内”被更改过的文件: - ...

  9. Java DOM解析器 - 查询XML文档

    这是需要我们查询的输入XML文件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <?xml version="1.0"?> ...

  10. 实用maven笔记一概念&构建

    maven,作为我现在每天都会使用的工具,却发现我还有很多地方了解的迷迷糊糊.老大就曾说过我的一个问题在于,做事情不够精细.大概就是太浮于表面吧.最近突然非常想把maven撸一遍.豆瓣搜了下高分书籍, ...