Article Detail

手机以rem布局示例模板

手机布局样式文件 //- 设置html标签font-size 针对手机布局js (function (doc, win) { var _root = doc.d...

HTML 阅读 69.6万 3 分钟阅读 2016-03-29 17:52

<!DOCTYPE html>
<html>
<head>
<title>手机布局样式文件</title>

<!--手机网站-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" /> 
<!--jquery库-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

<script>
//- 设置html标签font-size 针对手机布局js
(function (doc, win) {
    var _root = doc.documentElement,
        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
        resizeCallback = function () {
            var clientWidth = _root.clientWidth,
                fontSize = 20;
            if (!clientWidth) return;
            //if(clientWidth < 640) {
                fontSize = 20 * (clientWidth / 320);
            /*} else {
                fontSize = 20 * (640 / 320);
            }*/
            _root.style.fontSize = fontSize + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, resizeCallback, false);
    doc.addEventListener('DOMContentLoaded', resizeCallback, false);
})(document, window);
</script>
</head><body>
	<!--不建议以 像素px单位 calc js等布局-->
	<style>
	.main1 {
		font-size: 12px;
		color: #fff;
		width: 300px;
		height: 300px;
		margin:auto;
		background: blue;
	}
	</style>
	<div class="main1">
		以 rem 单位布局示例
	</div>

	
	
	<!--以 rem 单位布局示例 如
		<html style="font-size: 20px;">
	-->
	<style>
		.main2{
			font-size:12px;/*字体只能用px作单位*/
			color:#fff;
			width:15rem; /*300px除以20px*/
			height:15rem; /*300px除以20px*/
			margin:auto;
			background:red;
		}
	</style>
	<div class="main2">
		以 rem 单位布局示例
	</div>

    </body>
</html>

参考
http://www.cocoachina.com/webapp/20150715/12585.html
http://www.xiaoxiangzi.com/Programme/CSS/4298.html
http://less.bootcss.com/functions/
https://segmentfault.com/q/1010000002944457

广西柳州市 2016-03-31 09:31

/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/}
 
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    html{font-size: 129.375px;}
}

#⁰

广西河池市 2018-05-07 10:18

像素基本知识

视窗 viewport:
设备的屏幕上能用来显示我们的网页的那一块区域,而移动端还提供了两个viewport:

visual viewport(虚拟视口):
可以改变大小或形状,当前屏幕上显示的页面的一部分.
通过window.innerWidth/Height获取,会随著页面缩放而变化.
layout viewport(布局视口):
不会改变大小或形状,可以比可视化的viewport宽得多，并且包含出现在屏幕上的元素.
通过document.documentElement.clientWidth/Height获取.在Android 2, Oprea mini 和 UC 8中无法正确获取.
ideal viewport(理想视口):
不需要用户缩放和滚动就能正常的查看网站的所有内容,显示的文字大小合适,保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的.
渲染过程:
1) 渲染: 将整个页面渲染在一个layout viewport中，以保证页面排版正确;
2) 缩放: 将整个layout viewport缩放到visual viewport大小，以保证页面在手机屏幕上被完整显示出来;
公式表示就是：visual viewpor = layout viewport * scale;
例如你在手机上访问一个PC页面,手机当前展示区域就是visual viewport,但是整个PC页面是很大的,往往屏幕是显示不完,所以会出现滚动条给你滑动(固定值排版的话),整个PC页面的尺寸就是layout viewport了,上面说visual viewport可以改变大小或形状,意思是你可以通过旋转屏幕或放大缩小改变显示的页面.

物理像素(physical pixel)/设备像素:
显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果.

设备独立像素(density-independent pixel)/逻辑像素/密度无关像素:
可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如CSS像素)，然后由相关系统转换为物理像素.
公式表示就是：CSS像素 = 设备独立像素 = 逻辑像素.

与设备无关的像素(device-independent pixel)/CSS像素
用于页面布局的抽象单位，用来精确度量网页上的内容,在不同的设备或不同的环境中，css中的1px所代表的设备物理像素的长度可能是不同的.

屏幕密度(pixels per inch)/像素密度:
即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富,
公式表示就是：像素密度 = 对角线分辨率 / 屏幕尺寸.

设备像素比(device pixel ratio):
物理像素与逻辑像素之间的比例.
公式表示就是：设备像素比(dpr) = 物理像素(pp) / 设备独立像素(dip).
在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr.而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview).

广西河池市2018-05-07 10:20:18

示例
以iPhone6S作为基准设计尺寸
设备宽高: 375pt 667pt
屏幕密度: 326ppi
visual viewport: 375px 667px
物理像素: 750pp 1334pp
CSS像素: 750px 1334px
设备独立像素: 750dip * 1334dip
设备像素比: 2dpr

某某手机
设备宽高: 375pt 667pt
visual viewport: 375px 667px
物理像素: 375pp 667pp
设备独立像素: 375dip 667dip
设备像素比: 1dpr

尽管两者CSS像素所呈现的物理尺寸是一致的，但在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素.靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率.

广西河池市2018-05-07 10:21:14

(更详细内容请看The Ultimate Guide To iPhone Resolutions)

广西河池市2018-05-07 10:33:24

#²
(更详细内容请看使用Flexible实现手淘H5页面的终端适配)
(还有一些常用的居中布局,经典布局方法和优缺点可以参考我之前写的文章页面基础布局相关知识 --- 居中&经典布局)

移动端必备标签
width viewport宽度(数值/device-width)
height viewport高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)

禁止数字识自动别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略识别邮箱

<meta name="format-detection" content="email=no" />

删除默认的苹果工具栏和菜单栏

<meta content="yes" name="apple-mobile-web-app-capable"/>

设置苹果状态栏的背景颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

default 默认值.
black 状态栏背景是黑色.
black-translucent 状态栏背景是黑色半透明. 如果设置为 default 或 black ,网页内容从状态栏底部开始. 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡.

苹果添加到主屏后的标题（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="标题">

苹果是否启用WebApp全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" />

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度.

广西河池市2018-05-07 10:36:22

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms.

广西河池市2018-05-07 10:43:21

改变输入框placeholder的颜色值

::-webkit-input-placeholder { /* WebKit browsers */ color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

[b]旋转样式[/b]

//竖屏时样式
@media all and (orientation:portrait){}
//横屏时样式
@media all and (orientation:landscape){}

###transition闪屏
```css
/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
-webkit-backface-visibility:hidden;

纯CSS创建三角形

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        div {
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 40px solid #ff0000;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

input[type=number]的问题
1, maxlength属性不会提供任何反馈.
用js解决
2, form提交会默认取整数.
step属性规定<input>元素的合法数字间隔,也是通过自带箭头增减的数字,默认为1

<input type="number" name="points" step="0.01" />

通过transform进行skew变形，rotate旋转会造成出现锯齿现象

Element{
  -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
  transform: rotate(-4deg) skew(10deg) translateZ(0);
  outline: 1px solid rgba(255,255,255,0)
}

打电话

<a href="tel:10086">打电话给:10086</a>

发短信，winphone系统无效

<a href="sms:10086">发短信给: 10086</a>

写邮件
第一个功能以"?"开头，后面的以"&"开头
mailto:普通邮件
cc: 收件地址后添加抄送地址（Android存在兼容问题）
bcc: 抄送地址后添加密件抄送地址（Android存在兼容问题）
subject: 包含主题
body: 包含内容，
1) 如包含文本，使用%0A给文本换行
2) 如包含http(s)://等的文本自动转化为链接
3) 如内容包含图片（PC不支持）
包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址

<a href="mailto:xxx@qq.com;xxx@qq.com?cc=xxx&bcc=xxx@qq.com&subject=[邮件主题]&body=xxx%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>

某些Android手机圆角失效

Element{
    background-clip: padding-box;
}

android上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

ios和android下触摸元素时出现半透明灰色遮罩

Element {
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}

有些机型去除不了，不使用a或者input标签，直接用div标签

广西河池市2018-05-07 10:46:24

ios 设置input按钮样式会被默认样式覆盖

input,
textarea {
  border: 0; 
  -webkit-appearance: none; 
}

iphone及ipad下输入框默认内阴影

Element{
  -webkit-appearance: none; 
}

Retina屏的1px边框

Element{
  border-width: thin;
}

关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

this.value = this.value.replace(/\u2006/g, '');

IOS中input键盘事件keyup、keydown、keypress支持不是很好
html5的oninput事件代替

iOS某些时候会觉得滚动很卡

Element{
    -webkit-overflow-scrolling: touch;
}

auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止.
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果.继续滚动的速度和持续的时间和滚动手势的强烈程度成正比.同时也会创建一个新的堆栈上下文.
启动了硬件加速的特性，所以滑动起来会非常流畅；不过会影响性能

解决IOS键盘字母输入默认首字母大写

<input type="text" autocapitalize="off" />

禁止长按链接与图片弹出菜单

a,img { -webkit-touch-callout: none }

手机拍照和上传图片

//IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能.Winphone不支持
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />

输入框被键盘挡住问题

if(/Android/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
       document.activeElement.scrollIntoView();
     }
  })
}

可以解决绝大数安卓机上面的问题

广西河池市2018-05-07 10:49:20

播放视频不全屏

<!--
1.ios7+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

移动端 HTML5 audio autoplay 失效问题
苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放.
1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常
2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间
解决方法思路：先通过用户touchstart触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）.

document.addEventListener('touchstart', function () {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

微信下兼容处理

document.addEventListener("WeixinJSBridgeReady", function () {
   music.play();
}, false);

ios10+以上，尽管开发者设置了user-scalable=no，Safari还是允许用户通过手势来缩放
检测touch相关事件来阻止事件的触发

window.onload = function() {
    // 同时按下两个手指
    document.addEventListener('touchstart', function(event) {
        if(event.touches.length > 1) {
            event.preventDefault()
        }
    })
    var lastTouchEnd = 0;
    // 特别注意300ms时差的设置
    document.addEventListener('touchend', function(event) {
        var now = (new Date()).getTime();
        if(now-lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    })
}

select下拉选择设置右对齐

select option {
    direction: rtl;
}

#⁰