移动端根据设备大小设置字体大小（居于案例的理解扩展）
2016-07-23 10:51
519 查看
1、问题描述：
拿到公司里以前写好的网页查看，发现它的CSS中有这样一些东西：/*设备竖屏时的样式*/
@media all and (orientation : portrait){
.video_bg{
position:fixed;
z-index: -9999;
width: 100%;
background: #469BD4;
}
}
/*设备横屏时的样式*/
@media all and (orientation : landscape){
.video_bg{background: #A900B1;
position: fixed;
right: 0;
bottom:0;
z-index: -9999;
width: 100%;
height: 100%;
}
}
@media only screen and (min-width:320px) and (orientation:portrait){
html{font-size:100%;}
}
@media only screen and (min-width:360px) and (orientation:portrait){
html{font-size:125%;}
}
@media only screen and (min-width:400px) and (orientation:portrait){
html{font-size:150%;}
}
@media only screen and (min-width:600px) and (orientation:portrait){
html{font-size:200%;}
}
@media only screen and (max-width:768px) and (orientation:portrait){
.wrap{width:90%;}
}
@media only screen and (min-width:480px) and (orientation:landscape){
html{font-size:100%;}
}
@media only screen and (min-width:580px) and (orientation:landscape){
html{font-size:107%;}
}
@media only screen and (min-width:730px) and (orientation:landscape){
html{font-size:130%;}
}
@media only screen and (min-width:900px) and (orientation:landscape){
html{font-size:175%;}
}
@media only screen and (min-width:992px){
html{font-size:200%;}
}之前没有接触过移动端前端的开发，自己看这段代码完全靠猜：前面两个是对设备横竖屏进行自适应（这里的注释只能写在/**/中），后面是对不同屏幕大小进行自适应。
然后就这样，我在自己开发每个移动前端的时候也会加上这段代码，不懂就用的结果就是，我在写一个产品的首页的时候终于遇到大问题了：display为inline-block的div中的其他元素无法用margin:auto起作用了，并且换不同尺寸的手机或横竖屏，样式也会有所差别（这里我要记录哈，老大教我的一个小常识：在banner和footer中，他们在横竖屏的情况下宽高应该是固定px的，不用写成百分比，不然用户不好点击，用户体验很重要）。开始我还没想到是字体的问题。后来通过不断调试，想的是字体会有一定的影响，但是并不确定它的影响有多大，在这个项目中，我所有元素的width和height都设置的为百分比。
竖屏和横屏情况，logo的显示，图标、“MIDEO”、“Hot”和“friends”的居中问题。
2、知识点：
1、写移动端页面，一般用的字体单位都是rem，rem是相对根元素的大小单位。这里就要理解一个为什么要选用rem单位了，虽然我前面有弄清楚px、em和rem的概念（可以参照我前面的博文），但是显然我还没有弄清楚什么时候应该选用什么样的单位。
这里先理清这个概念：
①物理像素
②CSS像素
③设备像素比（DPR）
④视口：视口在CSS里的定义是<html>元素的包含块，称为初始包含块。它的宽度是所有CSS百分比宽度推算的根源（块级元素的宽度默认为100%）。
在桌面上，视口的宽度等同于浏览器窗口的宽度，高度即为浏览器窗口的高度。而在浏览器宽度通常为240px~640px的移动设备上也这样做的话，则会很不方便。这样就出现了布局视口的概念。
⑤布局视口：与桌面浏览器不同的是，浏览器默认的布局视口宽度与浏览器宽度完全独立。通常是768px~1024px，最常见的是980px（默认的布局视口的高度，各手机各浏览器倒是没有固定），而桌面浏览器的布局视口的尺寸就是浏览器窗口的尺寸（其实桌面浏览器根本没有“布局视口”的概念，“视口”就是浏览器的窗口）。
这里必须要说明的是：我前面代码中的单位的%，在这里比较容易弄混，%是相对于父元素的，幸好，这里用到%的是html标签，所以并没有什么大问题。其实这里替换成px为单位更好。
这里我一直以为根元素大小为12px，但是原谅我可能还是太天真了，虽然在浏览器中审查元素时，上面所示的css设置被划掉了，但是并不代表他没有作用。（在这个例子中，我的竖屏用的是Galaxy S5，它的屏幕大小为360*640），上面有这一设置：
@media only screen and (min-width:360px) and (orientation:portrait){
html{font-size:125%;}
}当我勾选它和不勾选它时，页面还是会发生变化。其实这里的html的字体大小已经变成了15px。代码改为以下：
/*设备竖屏时的样式*/
@media all and (orientation : portrait){
}
/*设备横屏时的样式*/
@media all and (orientation : landscape){
}
@media only screen and (min-width:320px) and (orientation:portrait){
html{font-size:12px;}
}
@media only screen and (min-width:360px) and (orientation:portrait){
html{font-size:15px;}
}
@media only screen and (min-width:400px) and (orientation:portrait){
html{font-size:18px;}
}
@media only screen and (min-width:600px) and (orientation:portrait){
html{font-size:24px;}
}
@media only screen and (max-width:768px) and (orientation:portrait){
}
@media only screen and (min-width:480px) and (orientation:landscape){
html{font-size:12px;}
}
@media only screen and (min-width:580px) and (orientation:landscape){
html{font-size:13px;}
}
@media only screen and (min-width:730px) and (orientation:landscape){
html{font-size:16px;}
}
@media only screen and (min-width:900px) and (orientation:landscape){
html{font-size:21px;}
}
@media only screen and (min-width:992px){
html{font-size:24px;}
}2、在上面用到的@media：是Css3中的媒体查询。
可以编写媒体查询表达式来让浏览器根据当前窗口尺寸自动在样式表中挑选一种样式并使用。
在CSS中，与媒体相关的样式定义是从CSS 2.1开始的。CSS 2.1中定义了各种媒体类型，包括显示器、便携设备、电视机等。
CSS 3中加入了Media Queries模块，该模块中允许添加媒体查询（media query）表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。到目前为止，media Queries模块得到了Firefox、Safari、Chrome浏览器以及Opera浏览器的支持。
①在Iphone中的显示：
在iphone 3GS和iPod touch中使用的Safari浏览器也对CSS 3的媒体查询表达式提供了支持。iPhone的分辨率是320px * 480px，但是它却不会按照max-width:979px的样式显示。这是因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口宽度作为980px进行显示的。因为现在的网页大多是按照宽度为800px左右的标准进行制作的，所以Safari浏览器如果按照980px的宽度来显示，就可以正常显示绝大多数的网页了。在这种情况下，可以利用<meta>标签在页面中指定Safari浏览器在处理本页面时按照多少像素的窗口宽度来进行：
<meta name="viewport" content="width=600px">
如果在页面中已经准备好了在小尺寸的窗口中使用的样式，并且有可能在iphone或iPod touch中被打开时，请不要忘了加入<meta>标签并在标签中写入指定的窗口宽度。
②Media Queries的使用方法：
@media 设备类型 and (设备特性) {样式代码}在代码的开头必须要书写“@media”，然后指定设备类型，也可以称之为媒体类型。
CSS 2.1中定义了10种设备类型
| 可以指定的值 | 设备类型 |
| all | 所有设备 |
| screen | 电脑显示器 |
| 打印用纸或打印预览视图 | |
| handheld | 便携设备 |
| tv | 电视机类型的设备 |
| speech | 语音和音频合成器 |
| braille | 盲人用点字法触觉回馈设备 |
| embossed | 盲文打印机 |
| projection | 各种投影设备 |
| tty | 使用固定密度字母栅格的媒介，比如电传打字机和终端 |
CSS中设备特性共有13中，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用 < 和 > 。
使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。
可以在表达式中加上 not 关键字或 only 关键字，not 关键字表示对后面的表达式执行取反操作：
/*对not后面的语句执行取反操作*/
@media not handheld and color {样式代码}
@media all and (not color)only 关键字的作用是，让那些不支持Media Queries 但是能够读取Media Type的设备的浏览器将表达式中的样式隐藏起来。对于不支持Media Queries的浏览器（比如IE8之前的浏览器）来说，无论是否有only ，都将忽略这个样式。
最后，CSS 3中的Media Queries 模块中也支持对外部样式表的引用：
@import url(color.css) screen and (min-width: 1000px); <link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="style.css">
3、要使一个display:inline-block的div 垂直居中于父元素（当然父元素中的子元素只排列为一行）：
<div class="container"> <div class="child">我要居中排列</div> </div>
div{
margin:0;
padding:0;
}
.container{
border:1px solid red;
width:200px;
height:140px;
text-align:center;
}
.container:before{
content:".";
height:100%;
display:inline-block;
vertical-align:middle;
visibility:hidden;
}
.child{
display:inline-block;
vertical-align:middle;
}vertical-align:middle;属性需要参照物，所以用:before伪元素来实现。这个方法也是用来实现子元素不定宽高，让子元素居中在父容器中的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 