meta标签

  • width设置的是layout viewport 的宽度
  • initial-scale=1.0 自带 width=device-width
  • 最佳实践:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Flex弹性盒模型

来源:慕课网

源HTML文件(备份下载):web_flex.html.zip


Flexbox兼容性问题

  • iOS、Android4.4及以上,可以使用最新的flex布局
  • Android4.4以下,只能使用旧版的flexbox布局

新版flex布局 和 旧版flexbox布局 对比:

新flex布局 旧flexbox布局
display: -webkit-flex; display: -webkit-flex-box;
-webkit-flex: 1; -webkit-flex-box: 1;
justify-content: center; box-pack: center;
align-items: center; box-align: center;

响应式设计

媒体查询:

媒体类型:

  • screen (屏幕) (常用)
  • print (打印机)
  • handheld (手持设备)
  • all (通用) (常用)

常用的媒体查询参数:

  • width, height (viewport宽高)
  • divice-width, device-height (设备的宽高)
  • orientation: 检查设备处于landscape还是portrait

媒体查询示例:

@media screen and (max-width:1024px) {
    /* ... */
}

设计点1:百分比布局

使用媒体查询来适应不同的固定宽度,只会从一组css切换到另一组css, 没有平滑渐变。当没有命中媒体查询时,变现就变得不可控(滚动,换行)。
所以需要百分比布局。

设计点2:弹性图片

类似第一点,图片也使用百分比。

img {
    max-width: 100%;
    height: auto;
}

设计点3:重新布局,显示与隐藏

当页面宽度过小时,就需要做出一些处理:

  1. 同比例缩减元素尺寸
  2. 调整页面元素布局
  3. 隐藏冗余的元素
  4. 经常需要切换位置的元素使用绝对定位,可以提高性能。

总结:

缺点:

  • 根据响应式设计的理念,一个页面包含不同设备的样式和图片。这样就造成了冗余。性能也不是最优。

优点:

  • 减少重复开发。

移动Web的特别样式处理

高清图片

在retina屏幕上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染。
100*100的图片,应该使用100dp*100dp.

例子:

  • width: (w_value/dpr)px;
  • height: (h_value/dpr)px;

1像素边框

在retina屏幕上渲染图片,1px使用2dp或者3dp渲染。

解决方法:

  • 方法一:border: 0.5px; /* 只有iOS8可以用 */
  • 方法二:scaleY(0.5):

相对单位rem

  • em: 相对于父节点的font-size (em在多层嵌套下,非常难以维护)
  • rem: 相对于html的font-size

rem的基值怎样设置:

rem = screen.width / 10
或者 rem = screen.width / 20

不使用rem的情况:font-size

一般来讲,font-size是不应该使用rem等相对单位的。应为字体应该首先保证阅读的实用性,其次才是排版布局。

多行文本溢出

【前端】移动端Web开发学习笔记【2】 & flex布局的更多相关文章

  1. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  2. ASP.NET Core Web开发学习笔记-1介绍篇

    ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...

  3. 无线端web开发学习总结

    无线web开发之前要做一些准备工作:一.必需的reset样式库1.其中的重点是盒模型box-sizing:由原来pc端的content-box改为border-box. *, *:before, *: ...

  4. 【web开发学习笔记】Structs2 Result学习笔记(三)带參数的结果集

    Result学习笔记(三)带參数的结果集 第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content= ...

  5. PHP和MySQL Web开发学习笔记介绍

    前言 从2016年2月1日开始,之后的几个月左右的时间里,我会写一个系列的PHP和MySQL Web开发的学习笔记.我之前一直从事Java语言的开发工作,最近这段时间非常想学习一门语言,就选择了PHP ...

  6. 【web开发学习笔记】Structs2 Result学习笔记(一)简介

    Structs2 Result学习笔记(一)简介 问题一 <struts> <constant name="struts.devMode" value=" ...

  7. 【web开发学习笔记】Structs2 Action学习笔记(两)

    action学习笔记2-大约action method讨论 Action运行的时候并不一定要运行execute方法,能够在配置文件里配置Action的时候用method=来指定运行哪个方法 也能够在u ...

  8. Django Web开发学习笔记(1)

    一.Python的标准类型 (1)bool型 >>> bool("") False >>> bool(None) False >>& ...

  9. python web开发学习笔记一:javascript基础

    一.认识js: 能进入到软件所实习是我的最大的收获,也是我的荣幸,我相信努力付出一定能够换回收获. 项目最先开始的是接触到web前端的一些内容,我们需要利用flask搭建应该有的框架.我有一些pyth ...

随机推荐

  1. Unable to make the session state request to the session state server处理

    Server Error in '/' Application. Unable to make the session state request to the session state serve ...

  2. [U3D 添加大地、天空,用第一视角看看自己做的世界]

    1.添加大地.天空. 在下方Assets文件夹里右键,导入素材包. Terrain(地形)和Skybox(天空盒子) 2.选中左边的Terrain,在inspector里,选择中间的刷子(地形),还有 ...

  3. 转:SQL子句的执行顺序

    SQL 不同于与其他编程语言的最明显特征是处理代码的顺序.在大数编程语言中,代码按编码顺序被处理,但是在SQL语言中,第一个被处理的子句是FROM子句,尽管SELECT语句第一个出现,但是几乎总是最后 ...

  4. WEBAPP开发技巧总结

    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机 ...

  5. YTU 3008: 链串的基本运算

    3008: 链串的基本运算 时间限制: 1 Sec  内存限制: 128 MB 提交: 1  解决: 1 题目描述 编写一个程序,实现链串的各种基本运算,主函数已给出,请补充每一种方法. 1.建立串s ...

  6. VulToEs

    VulntoES https://github.com/ChrisRimondi/VulntoES

  7. Word2003使用VBA教程

    [正文] 注:本文中所有vba代码都是储存在doc中,而非normal.dot 1.打开一个.doc文档 2.按ALT+F11 3.左侧 Project-插入-模块 4.输入自己的代码,一定要是函数的 ...

  8. 公司的SVN服务器改变了IP地址,请问以前下载的代码如何同步,

    工作根目录上 右键->TortoiseSVN->Relocate,修改URL 更新前先备份!

  9. Emacs Org-mode 1 下载、安装、基本使用

    1.1 总述 Org 是一种帮助我们做笔记.日常事件或者项目计划的快速高效的文本格式系统. Org 有以下特点: Org mode 基于组织结构(outline-mode)对文本进行组织.具有良好的快 ...

  10. 离线环境下安装ansible,借助有网环境下pip工具

    环境 有网的机器(192.168.19.222):rhe65,python2.7.13,pip9.0.1 离线机器(192.168.19.203):rhe65,python2.6 FTP(192.16 ...