- 上一篇:移动端Web开发学习笔记【1】
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:重新布局,显示与隐藏
当页面宽度过小时,就需要做出一些处理:
- 同比例缩减元素尺寸
- 调整页面元素布局
- 隐藏冗余的元素
- 经常需要切换位置的元素使用绝对定位,可以提高性能。
总结:
缺点:
- 根据响应式设计的理念,一个页面包含不同设备的样式和图片。这样就造成了冗余。性能也不是最优。
优点:
- 减少重复开发。
移动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布局的更多相关文章
-
【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
-
ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
-
无线端web开发学习总结
无线web开发之前要做一些准备工作:一.必需的reset样式库1.其中的重点是盒模型box-sizing:由原来pc端的content-box改为border-box. *, *:before, *: ...
-
【web开发学习笔记】Structs2 Result学习笔记(三)带參数的结果集
Result学习笔记(三)带參数的结果集 第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content= ...
-
PHP和MySQL Web开发学习笔记介绍
前言 从2016年2月1日开始,之后的几个月左右的时间里,我会写一个系列的PHP和MySQL Web开发的学习笔记.我之前一直从事Java语言的开发工作,最近这段时间非常想学习一门语言,就选择了PHP ...
-
【web开发学习笔记】Structs2 Result学习笔记(二)动态结果集
Result学习笔记(二) - 动态结果集 动态结果 一定不要忘了为动态结果的保存值设置set get方法 第一部分:代码 //前端 <% String context = reques ...
-
【web开发学习笔记】Structs2 Result学习笔记(一)简介
Structs2 Result学习笔记(一)简介 问题一 <struts> <constant name="struts.devMode" value=" ...
-
【web开发学习笔记】Structs2 Action学习笔记(两)
action学习笔记2-大约action method讨论 Action运行的时候并不一定要运行execute方法,能够在配置文件里配置Action的时候用method=来指定运行哪个方法 也能够在u ...
-
Django Web开发学习笔记(1)
一.Python的标准类型 (1)bool型 >>> bool("") False >>> bool(None) False >>& ...
随机推荐
-
第二章作业-第3题(markdown格式)-万世想
第3题题目是: 完成小组的"四则运算"项目的需求文档(使用Markdown写文档),尝试同组成员在各自PC上修改同一文档后,如何使用Git命令完成GitHub上的文档的更新,而不产 ...
-
fir.im Weekly - 2016 年 Android 最佳实践列表
2016 年已经过去一半,你在年初制定的成长计划都实现了吗? 学海无涯,技术成长不是一簇而就的事情.本期 fir.im Weekly 推荐 王下邀月熊_Chevalier的 我的编程之路--知识管理与 ...
-
虚拟化之vmware-vsphere (web) client
两种客户端 vsphere client 配置>软件>高级设置里的变量 uservars.supressshellwarning=1 vsphere web client 安装完vSphe ...
-
Android性能优化之UI渲染性能优化
版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 本篇博客主要记录一些工作中常用的UI渲染性能优化及调试方法,理解这些方法对于我们编写高质量代码也是有一些帮助的,主要内容包括介绍CPU,GPU的职 ...
-
iOS-静态库,动态库,framework浅析(二)
创建.a静态库 第一步,新建工程. 一般使用工程名就使用库的名称,比如我这里用FMDB来创建静态库,我的工程名就取名为FMDB,创建的.a静态库就是libFMDB.a. ...
- struts2 优缺点
-
coding利用Webhook实现Push代码后的jenkins自动构建
安装jenkins 篇:http://www.cnblogs.com/loveyouyou616/p/8714544.html 之前部署了持续集成工具jenkins.通常是开发后的代码先推到 远程代码 ...
-
android系统各种音量的获取与设置
获取系统音量 通过程序获取android系统手机的铃声和音量.同样,设置铃声和音量的方法也很简单! 设置音量的方法也很简单,AudioManager提供了方法: publicvoidsetStream ...
-
x264中重要结构体参数解释,参数设置,函数说明 <;转>;
x264中重要结构体参数解释http://www.usr.cc/thread-51995-1-3.htmlx264参数设置http://www.usr.cc/thread-51996-1-3.html ...
-
吐血整理:PyTorch项目代码与资源列表 | 资源下载
http://www.sohu.com/a/164171974_741733 本文收集了大量基于 PyTorch 实现的代码链接,其中有适用于深度学习新手的“入门指导系列”,也有适用于老司机的论文 ...