原文参考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ

1.开发移动端,头部必要的配置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">(各属性值不在介绍,在开发中小米(2016年小米4)测试user-scalable=no是不起作用的)
2.rem的使用设置根节点的font-size,开发过程中是用Js计算的。
公式 320/100=屏幕尺寸/fontSize值
3.需要点击跳转,语义标签是a(dispaly:block;)
在语义化考虑的情况下a标签中添加一个span(disply:block),span中在添加容器
4.为了用户友好体验,在开发移动端页面时候设置最大宽度和最小宽度。如
{
max-width:640px;
min-width:320px;
}
5.移动端开发页面一些默认样式
禁止a标签背景
a,button,input,optgroup,select,textare{
// 去掉a,input,button点击时蓝色外边框和灰色半透明
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
禁止长按a,img标签出现菜单栏
a,img{
// 禁止长按显示菜单栏
-webkit-touch-callout:none;
}
流畅滚动
body{
-webkit-overflow-scrolling:touch;
}

6.单行截取参照http://www.cnblogs.com/victory820/p/6728904.html

7.calc的使用,不考虑低版本(ie11以下安卓56以下,opera所有)兼容性,建议使用,方便。

8.box-sizing的使用,解决不同浏览器盒模型的展现不一致。(移动端常用)
content-box;默认值标准模型,width和height不包括边框内边距外边距
padding-box;width和height包括内边距不包括边框和外边距
border-box;怪异模型width和height包括内边距和边框,不包括外边距。

9.水平垂直居中(移动端常用)
缺点:需要知道小容器的宽度和高度
格式
<div class="parent">
<div class="child"></div>
</div>
.parent{
position:relative;
width:100px;
height:100px;
background-color:red;
}
// 注意是四个方向都是0
.child{
position:absolute;
margin:auto;
top:0;
right;0;
bottom:0;
left:0;
width:50px;
height:50px;
background-color:gold;
}
10.line-height的设置(移动端常用)
normal:默认,自动分配合理的行间距
number设置数字,会与当前字体尺寸相乘来设置,即倍数
length设置固定行间距
%基于当前字体尺寸的百分比行间距
inherit从父元素继承过来
记住下面公式,利用排除Bug
空白间距=lineHeight - fontSize
设置父元素的line-height为100%就可以没有留白

11.vertical-align调整图标垂直居中(移动端常用)
baseline:内容与父元素基线对齐
sub:元素基线与父元素下标基线对齐
super:元素基线与父元素上标基线对齐
top:元素及其后代顶端与整行顶端对齐
text-top:元素顶端与父元素字体的顶端对齐
middel:元素中线与父元素的基线对齐
bottom:元素及其后代底端与整行的底端对齐
text-bottom:元素底端与父元素字体的底端对齐
percentage:百分比指定偏移量。基线是0%
length:数值方式,基线是0(常用)

12.flex的使用
使用flex时候,如果两列不是平均分配,试试给width设置为0
https://csstriggers.com/检查css属性触发的哪些过程

移动端h5开发相关内容总结css篇--笔记的更多相关文章

  1. 转---移动端 h5开发相关内容总结——CSS篇

    作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ...

  2. 移动端 h5开发相关内容总结——CSS篇

    1.移动端开发视窗体的加入 h5端开发以下这段话是必须配置的 <meta name="viewport" content="width=device-width, ...

  3. 移动端 h5 开发相关内容总结——JavaScript 篇

    1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ...

  4. 移动端 h5开发相关内容总结(三)

    之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...

  5. 移动端H5开发遇到的问题及解决方法

    本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...

  6. 移动端H5开发自适应技巧

    移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ...

  7. 移动H5开发入门知识,CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  8. 在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)

    一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...

  9. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

    本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...

随机推荐

  1. 如何分析python的性能(linux)

    一.多进程: 查看程序所有进程与线程 如果python程序启动后形成多个进程如何判断其关系 显示进程的树状结构.-cp 表示树展开,且显示进程号码 $pstree -cp 显示结果 │ │ │ ├─p ...

  2. 对EM算法的理解

    EM算法中要寻找的参数θ,与K-means聚类中的质心是对应的,在高斯混合模型中确定了θ,便可为样本进行类别的划分,属于哪个高斯分布的概率大就是哪一类,而这一点与K-means中的质心一样,质心确定了 ...

  3. ubuntu下Android反编译详细教程-apktool,dex2jar,jd-gui的使用

    转载请注明出处:http://blog.csdn.net/fightlei/article/details/52432161 最近在学习Android反编译的一些知识,虽然在网上搜到了很多相关的文章, ...

  4. 编写高质量代码:Web前端开发修炼之道(二)

    第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

  5. 基础篇:6.5)形位公差-基本规则 Basic Rules

    本章目的:述说形位公差的基本规则 1.代表规则的修正符号与使用情况: 使用情况举例: 2  有关术语 为了明确线性尺寸公差与形位公差之间关系,对尺寸术语将作进一步论述与定义. //无需强记,但希望现有 ...

  6. 10g 升级到11g 失效对象2则

    ########SAMPLE 0 Invalid X_$ Views & Synonyms After Upgrading to 11g (文档 ID 878623.1) Those view ...

  7. APP开发的三种技术对比

    目前来说主流的App开发方式有三种:Native App .Web App.Hybird App.下面我们来分析一下这三种App开发方式的优劣对比: 一 :Native App 即 原生App开发 优 ...

  8. react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

    在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...

  9. CentOS7 配置免密登陆

    首先我通过VMware配置了4台机器 然后依次更改每台机器的hosts文件为:   (/etc/hosts) 192.168.32.128 linux1192.168.32.130 linux2192 ...

  10. unity鼠标拖动物体旋转

    using System.Collections; using System.Collections.Generic; using UnityEngine; /// <summary> / ...