移动端开发梳理

最新推荐文章于 2024-04-23 03:35:03 发布

George_Fal

最新推荐文章于 2024-04-23 03:35:03 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alan2kat/p/7441013.html

零零碎碎学习了移动端开发的一些常识，还是梳理一下吧：

1.视口设置：

传统PC页面在手机上显示，会根据默认Viewport缩放（ios为980px,安卓有不同数值），让页面整个呈现在手机上，但缩放后字图图片过小。

移动端上开发，首先为了排版正确，第一步是设置viewport为合适的值，一般设宽度为设备。

visual viewport：手机屏幕能看到的尺寸，会因为缩放而改变。

layout viewport:布局viewport，渲染时，底层页面的实际尺寸。

一般说的viewport指的是layout viewport，因为移动端页面往往会禁止用户缩放，或者限制了缩放的区间。

2.布局：

由于y移动设备尺寸不一，解决布局自适应的基本方案是使用百分比布局，除了使用%，还有vw、vh单位，分别表示设备宽/高的百分之一。

3.字体：

px、em、rem

em在多层嵌套下不好控制，推荐rem，r是root的意思，即基于html比率的字体大小。

rem的基值，慕课网的视频中推荐是screen.width/20,也就是说，320px的屏幕1rem为16px;可以。

4.图片：

自适应：div>img:width:max-width;height:auto;

清晰度：宽高应该用物理像素渲染：100px*100px的图片，用100dp*100dp渲染；

width:(w_value/dpr)px;

height:(h_value/dpr)px;

根据dpr选择不同分辨率图片：

*img1、img2、img3分别是某张图片的小中大体裁，-webkit-内核的浏览器可以根据设备像素密度选择合适大小的图片。可惜在IE和Android4.4以下无效。

也可以使用picture标签根据分辨率切换图片：

1 <picture>
2     <source media="(max-width: 240px)" srcset="/uploads/1703/city5.jpg 1x,
3 /uploads/1703/city5big.jpg 2x" />
4     <source media="(max-width: 480px)" srcset="/uploads/1703/city5-m.jpg 1x,
5 /uploads/1703/city5big-m.jpg 2x" />
6     <img src="/uploads/1703/city5.jpg" alt="City" />
7 </picture>

另外，如果图片使用rem单位的话：

width:(w_value/rem基值 )rem；

height:(h_value/rem基值) rem;

5.flex布局（弹性伸缩盒子）

内容自动填充满容器（等比或按比例填充），详见阮一峰课程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

*android4.4一下只能用flexbox布局

6.响应式：在不同尺寸的设备上选择性地使用某些样式，达到按设备尺寸渲染的目的。

--核心是使用css3的媒体查询：

@media screen and (max-width: 320px) {
    body {
        background-color:lightblue;
    }
}
@media screen and (max-width: 980px) {
    body {
        background-color:red;
    }
}
...

--百分比布局；

--弹性图片：img标签外有个div容器，宽度随页面伸缩变化，img本身width：max-width；height：auto；充满整个div。

--适应小屏幕时，做到：

1.同比例缩小元素。

2.调整结构布局。

3.隐藏冗余元素。

*由于响应式设计的css包括了不同尺寸的的渲染方案，因而有冗余的缺点；现在不少企业都给移动端一个域，如m.xxx.com，这种情况下就是移动端/PC端分开两套方案，在用户进入页面时先判断设备再适配到相应的页面即可。

9. 1像素变框：

原因：1px的框在retina屏幕上用了2dp来渲染；

border:0.5px 是不行的（仅ios8可用）

因为是移动端，所以css3的tranform：scaleY可用：

 1 li:before{
 2     position:absolute;
 3     top:-1px;
 4     left:0;
 5     content:'';
 6     width:100%;
 7     height:1px;
 8     border-top:1px solid #333;
 9     -webkit-transform:scaleY(.5);
10 }

10.文本溢出：

 1 .singe{
 2     overflow:hidden;
 3     white-space:nowrap;
 4     text-overflow:ellipsis;
 5 }
 6 .more{
 7     display:-webkit-box;
 8     overflow:hiden;
 9 
10     text-overflow:ellipsis;
11     word-break:break-all;  
12 
13     -webkit-box-orient:vertical; //纵向审查
14     -webkit-line-clamp:2; //限定行数
15 }