移动端web页面知识小结之页面部分

移动端web页面知识小结之页面部分

原文网址：

http://www.imooc.com/article/9153

http://www.imooc.com/article/9153

一、设计

H5的设计图一般是720P或者1080P的.算法就是/2或者/3得到的数值,就是H5页面的数值.
一般情况下,我们以安卓标准360*640为准则.iphone的不同分辨率,我们使用自适应样式去控制即可.

二、切图————Retina显示屏带来的问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。

前端的应对方案是： 设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}

三、单位

在PC端制作网页的时候,我们都习惯了的单位是px,

在移动端可以但最好不要使用px.因为你不知道将来会发生什么.推荐采用的单位是rem!!!

rem是root-em的缩写,也就是说,是根相对单位,其相对的是html的font-size的单位.
html的font-size默认是16px.

在PC端chrome浏览器中,默认最小文字是 12px 当你设置为这样之后利用开发者工具进行调试的时候,会发现有一些诡异的地方.因此,需要将浏览器的最小文字设置为10或者6,一般都设置到6,这样可以解决在PC端调试的问题.在移动端是没有这个限制的(有,但默认关闭)

在移动端的推荐写法：

html {font-size: 62.5%;}  // 16px / 10px x 100% = 62.5%

这个百分比来源于浏览器自己设置的默认字体大小.一般默认情况下,浏览器默认大小是16px,也可以不是.这样做的根本目的,是将网页的解释权交给各个浏览器自己去处理.无论是设置为10px还是100px,或者62.5%在默认状态下,都是没有问题的.但是,如果浏览器的设置不是默认,那么,62.5%的优势就出来.

注：在PC端也能这样设定HTML font-size百分比
但是,不能设置为62.5% 因为谷歌浏览器默认最小字体是12px.也就是说,你设置为62.5%的话,会自动转换为12px.
解决方法是,设置为625%,然后用到的地方全部除以100。

4、不可破坏盒子模型

强烈不推荐写下面的代码，这会破坏盒子模型

* {box-sizing:border-box;}

因为：box-sizing:border-box;可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中

5、尽量不要设定宽度

在做移动端页面的时候,尽量不要设定宽度,让它自然的占据一行,这时候我们可以根据需要设定外填充和内填充.

如果需要写一个盒子,默认是百分百宽的,我们怎么做呢? 答案是,什么都不做,那么它就是百分百了

遇到多列布局的时候，就不要给rem这样的单位的宽度,而是要给50%或者33.3%的宽度.

在设定了这样的宽度之后,不要给这个元素设定内填充和外填充.如果有需要的话,在这个元素里面再写一个元素,给这个元素加你所需要的填充.

另外,在布局上,要尽量少用浮动布局,适当在细节部分使用定位布局,并做好隐藏溢出等处理.以防止浮动布局可能出现的问题.

6、边框

在PC端的网页制作中,我们一般就使用边框属性

border: 1px solid #ddd;

但是在移动端,就需要特别注意了,因为边框的宽度是计算在盒子模型当中的,所以,如果你使用不慎,可能造成你布局的困境.

因此,一般矩形的元素,我们可以使用

outline: 1px solid #ddd;

来制作边框,这个属性是不会计算在盒子模型当中的.

但当你尝试做一个两列布局的列表的时候,使用这个参数,你会发现两个元素之间的边框好像是两个像素.对的,你没有看错,确实是两个像素. 怎么解决这个问题呢?一般情况下,你只需要给元素加上背景就可以解决这个问题.后面的元素的背景会遮住前面元素的outline发出来的边框.

如果元素不是矩形的怎么办呢? 其实很好解决.因为,在CSS中,不仅仅是outline可以来模拟边框,还有一个属性,也是可以模拟边框的,那就是CSS3的box-shadow外发光属性.

要给元素加上一个1px的实线边框,可以这样写：

box-shadow:0 0 0 1px #ddd;

还是有办法的,可以借助伪元素来实现模拟,:before和:after;

7、尽量不要设计边框线条

网上有不少0.5px边框的实现教程,这样做的好处是,可以做出比较细的线条,让我们的H5看上去更像原生的APP.我个人的建议是,不要尝试这样做,因为很麻烦,而且兼容性都有问题,得不偿失.那么正确的做法是什么呢?很简单——跟你的设计师说,尽量不要设计线条

8、使用jquery还是zepot

使用zepot的原因只有一个,它小.还有其他的好处吗?没发现.

我个人的建议是使用jquery2.x的版本,好处有如下

拥有大量的插件可以使用

功能比zepot强大太多

效能比zepot强大

习惯了jquery

9、样式按组件或板块分文件写再合成

采用scss来写css代码

9.1、设置各种变量

拿到设计图的第一步，就是要分析各个页面之间有哪些模块、哪些样式、哪些颜色是一样的。一般情况下，为了各个页面的风格统一，各个页面上的主颜色应该都是一致的，而且好些页面都会用到一些相同的组件，例如slider。所以，我们首先可以定义一个常量文件，里面就专门存放颜色、高度、宽度等变量。定义一个公共样式文件，例如写一些各个页面都有可能用到的清楚浮动等样式。

用scss定义的话，其中有一个方法是%定义法，就是定义了并不会被编译，而是实际上用到的时候才会被编译。

9.2、按模块细分

按模块等细分之后，代码的可读性能够明显地提高，方便维护，而且引入页面的文件个数也减少了，还可以提高性能呢。不过，这里要注意，子模块的文件名要以“_”开始哦，这样就不会被编译，而是需要引用的时候再编译哦。

10、列表

百分比的优势在于，同一个百分比的真实尺寸会跟随屏幕大小变化

假设现在的要求是一行4个板块，适应任何屏幕。那么，用ul,li写html，然后布局的话，如果写定ul的宽度是100%，然后li的宽度是25%，再设置box-sizing:border-box的话。各种屏幕下，这四块都是平分并且不会出现横向滚动条的。不过要注意，这个时候的间距就不要用margin-left和margin-right来撑开，而是用padding来撑开。就是像这样比例明显，板块区分度高的情况适合用百分比来布局。

代码如下：

<style type="text/css">
ul{ width:100%; margin-bottom:10px;}
ul li{ width:25%; box-sizing:border-box;}
</style>

11、常见效果

11.1、页面板块可横向滑动

不要以为这种效果会涉及到什么touch事件，要写多复杂的js。其实只用css就可以很简单地实现了。原理就是利用overflow属性。设置其水平方向滚动，垂直方向hidden即可。 当然，还要配合一些其他的代码。 具体css代码如下：

<style>
ul.pinxiang-list{ padding:10px; padding-top:0; padding-bottom:20px; width:100%; box-sizing:border-box; overflow-x:scroll; overflow-y:hidden; white-space: nowrap; float:left;}
ul.pinxiang-list li{ position:relative; display:inline-block; margin-right:5px; ｝
/*这里最主要的就是要设置ul的宽度是100%，并且向左浮动。li要设置为display:inline-block.*/
</style>

如果你用谷歌调试的时候，会出现一个明显的滚动条。但是如果你用真机，也就是用移动设备看的时候，你会发现其实滚动条是不会出现的。所以有时候做移动的东西，还是需要真机测试一下比较靠谱啊。

要注意一个问题，由于li被display:inline-block.那么就有了inline的属性，默认。此元素会被显示为内联元素，元素前后没有换行符。并且，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。什么意思呢，简单来说就是这些li的对齐基线的默认方式是以最后一行的文字对齐的。

这个时候，我们就需要设置一下vertical-align这个属性的值了。设置为：

vertical-align:middle