一、meta的使用
1、强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉:
<meta name="msapplication-tap-highlight" content="no">
3、忽略页面的数字为电话,忽略email识别
<meta name="format-detection" content="telephone=no, email=no"/>
二、针对适配等比缩放的方法:
@media only screen and (min-width: 1024px){
body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;}
}
或者
@media all and (orientation : landscape) {
h2{color:red;}/*横屏时字体红色*/
}
@media all and (orientation : portrait){
h2{color:green;}/*竖屏时字体绿色*/
}
三、布局
1.布局使用百分比:
不同的手机有着不同的分辨率,这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素,因为子元素的百分比高度是根据父元素的高度来确定的,当父元素的高度为不确定值时,或者说父元素的高度未定义时,子元素的高度百分比将没有用(没有参照物)。所以只有设置了父元素的高度,子元素的高度百分比才会有用。
2.em与rem:
em是根据相对单位,不是固定的,他会继承父级元素的字体大小,若没有父级则em的相对基准点为浏览器的字体大小,浏览器的字体默认为16px,因此若无父级元素,相对于浏览器大小:Xem=X*16px;
rem是css3新增属性,是完全相对于HTML根元素大小设定的,默认为10px,因此无论父级字体大小,1rem=10px。
3.栅格布局:
box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。
4、wap页面有img标签,记得加上display:block;属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。
5、有关Flexbox弹性盒子布局一些属性
1、不定宽高的水平垂直居中
.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
2、[flexbox版]不定宽高的水平垂直居中
.xx{
justify-content:center;//子元素水平居中,
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
四、文本的处理
1、关闭iOS键盘首字母自动大写
2、//单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
3、//多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}
4、
html {
-webkit-text-size-adjust: 100%;
}
五.单个页面内容不能过多
设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。
移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信、QQ等。
使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在 设计环节 就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住。
如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占用 150px,底部占用 110px,共占用了 260px,因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时,使用 Chrome 浏览器模拟设备大小,将该尺寸(7501074)存下来,用于实时查看移动端页面效果。
如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:
- 如果对整个页面进行缩放(使用 meta 标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
- 就算使用 rem 作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配 QQ 的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。
750*1334 页面示例
六. 标题简短
移动端浏览器导航条宽度有限,简短的标题可以使其展示完整。
七. 二维码图片使用 img 标签引入
二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。应使用 img 标签引入,如下:
八. 二维码图片记得扫描测试
有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示:
QQ内的温馨提醒
这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如 App 的下载页面等。因此二维码的扫描测试不能少。
举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。
九. 使用 Gulp 拼合图片
如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写 CSS 的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。
举个例子,如果布局时 width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100% 的宽度)内会将其他图片显示出来,这不是我们想要看到的。
十. 关于链接的分享-QQ
如果将页面链接直接复制分享给其他人,在手机上接收链接消息的用户可能会看到链接的相关信息,如页面标题、描述和图片。相关信息设置方式如下:
十一. 图片压缩
使用自动化工具 gulp-imagemin(教程) 来压缩图片,效果举例:101 KB => 80.7 KB。后来我使用了在线工具 Tinypng 又进行了一次压缩,效果举例:(上面使用 gulp-imagemin 压缩过的图片)80.7 KB => 38.1 KB,可见光使用自动化工具来压缩是不够的,大部分图片仍存在较大的压缩空间,可以再扔到 Tinypng 里压缩一下看看。
十二. Loading
代码段分享,拿走即用~
function loading(){
function Load(){}
Load.prototype.loadImgs = function(urls,callback) {
this.urls = urls;
this.imgNumbers = urls.length;
this.loadImgNumbers = 0;
var that =this;
for(var i=0;i<urls.length;i++){
var obj = new Image();
obj.src = urls[i];
obj.onload = function(){
that.loadImgNumbers++;
callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
}
}
};
var loader = new Load();
loader.loadImgs([
// 将所有需要加载的图片地址写于此处
"http://domain/site/dist/img/XX.png",
"http://domain/site/dist/img/XX.png",
"http://domain/site/dist/img/XX.png",
"http://domain/site/dist/img/XX.png",
"http://domain/site/dist/img/XX.png",
"http://domain/site/dist/img/XX.png",
"http://domain/site/dist/img/XX.png"
],function(percent){
// 假设显示百分比的元素为 $(".percent")
$(".percent").text(percent+'%');
// 加载结束后,隐藏相应的 loading 或遮罩
if(percent==100) {
$(".mask").css('display','none');
}
});
}
// 执行 loading 方法
loading();
十三. CSS 动画属性前缀 webkit
使用 CSS3 来制作动画效果的话,webkit 前缀一定记得加,要不然在某些手机下动画效果是没有的。
如下:
-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;
@-webkit-keyframes f {
0% {
opacity: 0;
-webkit-transform: translate3d(750px,0,0);
transform: translate3d(750px,0,0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes f {
0% {
opacity: 0;
-webkit-transform: translate3d(750px,0,0);
transform: translate3d(750px,0,0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
推荐使用自动化工具来处理未加前缀的 CSS 文件,如 gulp-autoprefixer。
参考博客地址:
https://blog.csdn.net/qq_36584352/article/details/80775529
https://www.duanliang920.com/learn/web/html5/321.html