0条评论
还没有人评论过~
一、视口的概念
- layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。js获取布局视口：
document.documentElement.clientWidth | document.body.clientWidth； - visual viewport(视觉视口)：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。js获取视觉视口：
window.innerWidth； - ideal viewport(理想视口)：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。js获取理想视口：
window.screen.width；
理想视口才是我们设计移动web需要的视口，那么如何去设置视口呢？
用meta标签 ：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
maximum-scale=1.0, minimum-scale=1.0">
1、content属性 ： 用来设置视口的，width属性就是视口的宽，它可以是任意数字，设为 device-width 表示设备的宽度，这就是我们需要的理想视口，当没有设置时默认会按980px去显示
2、initial-scale : 视口初始的缩放比，可设置为大于0的数字
3、user-scalable : 设置是否允许用户进行缩放，可设置为 yes / no 或 1 / 0
4、maximum-scale : 设置视口的最大缩放比，可设置为大于 0 的数字
5、minimum-scale : 设置视口的最小缩放比，可设置为大于 0 的数字
三、涉及显示的几个概念
1、物理像素与CSS像素
设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。
2、分辨率(物理像素)
screen.height //screen.width返回显示设备的信息。
除非调整显示设备的分辨率，否则看作是常量。
(显示)分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平像素数为160个，垂直像素数128个。
分辨率越高，像素的数目越多，感应到的图像越精密。
而在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。
以分辨率为1024×768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。
分辨率不仅与显示尺寸有关，还受显像管点距、视频带宽等因素的影响。其中，它和刷新频率的关系比较密切，严格地说，只有当刷新频率为“无闪烁刷新频率”，显示器能达到最高多少分辨率，才能称这个显示器的最高分辨率为多少。
3、PPI
pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。
手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。
这个数值是多少？按照2010年前苹果公司CEO史蒂夫·乔布斯（Steve Jobs）在iPhone 4发布会上对视网膜技术的介绍：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。)
那么，是不是屏幕PPI超过这个数值就没有意义了？
==>除PPI之外，还看它的饱和度，渲染度。
4、DPR设备像素比
DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值：
DPR = 设备像素 / CSS像素(某一方向上)
普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3
因为大部分桌面显示器的devicePixelRatio为1，所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。
举个栗子来说，一张100x100的图片，通过CSS设置它width:100px; height:100px; 。在电脑上打开，没有什么问题，但是在手机上打开，屏幕按照逻辑分辨率来渲染，假设手机的devicePixelRatio=3，那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片，你的图片可能因此变得模糊，因为细节不够。所以一般明智的做法是把图片换成300x300的，CSS宽高不变，这样在手机上展示时，CSS宽高换算成物理像素是300x300，你的图片也是300x300，就不会变糊了。
5、常用移动设备的PPI与DPR
| IOS设备 | PPI | DPR |
| iPhone4 | 326 | 2 |
| iPhone4s | 326 | 2 |
| iPhone5 | 326 | 2 |
| iPhone5s | 326 | 2 |
| iPhone6 | 326 | 2 |
| iPhone6s | 326 | 2 |
| iPhone6 PLUS | 441 | 3 |
| iPhone6s PLUS | 441 | 3 |
| iPad | - - | 2 |
| iPad | - - | 3 |
| android | 尺寸 | dpr |
| 低清设备 | － | 1 |
| mx2 | 800*1280 | 2.5 |
| 小米note | 720*1280 | 2.75 |
| 三星note4 | - | 4 |
6、二倍图
由于移动设备的物理像素和css单位px是不同的，在文字上的体现差别不大但在图片上可能就会造成模糊，
以iphone6为例，它的物理像素比是2，用css设置一张图片50 * 50的图片，此时在手机上的显示是100 * 100
的分辨率，相当于被拉伸了两倍，图片看起来就很模糊，解决办法是用100 * 100的图，再设置它的宽高为50 * 50。
背景精灵也是，会把精灵图 * 2，但获取它的background-position时，要先把精灵图 / 2,再去量它的位置 , 然后
设置background-size : 宽 / 2 高 / 2 ;
注：background-size: cover : 背景拉伸到能覆盖这个容器
background-size: contain : 背景拉伸，当宽或高其中有一个铺满，就不再拉伸了
7、初始化
做移动端页面时的初始化：
（1）设置视口标签
（2）引入normalize.css(是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一)
（3）去掉一些移动端的默认模式
I、移动端的a标签点击会有高亮效果，需要清除，设为 transparent 透明
html{ -webkit-tap-highlight-color: transparent ; }
II、移动端浏览器，ios默认有自己的外观需要去掉才能自定义样式
html{ -webkit-appearance: none ; }
III、禁止长按页面时弹出菜单
img,a{ -webkit-touch-callout: none ; }
四、移动开发的技术选型
1、单独做移动开发
通常情况下输入网址，会判断是PC端还是移动端打开，移动端打开就在域名前加 m. ，打开移动端的网页
-- 单独做移动端有下方几个技术方案
（1）、流式布局（宽度设为百分比的形式）
（2）、flex弹性布局（推荐）
（3）、less + rem + 媒体查询 或者 rem + flexible.js (推荐)
（4）、混合布局（推荐）
2、响应式布局
（1）、媒体查询
（2）、bootstrap
五、flex基本样式
css3中新增的属性 ： display：flex;
弹性盒布局中有两根轴，主轴和侧轴
常见的父元素属性
1、flex-direction : 设置主轴的方向
（1）、row : 主轴为 X 轴，元素从左往右排列 （默认）
（2）、row-reverse : 主轴为 X 轴，元素从右往左排列
（3）、column : 主轴为 Y 轴， 元素从上到下排列
（4）、column-reverse : 主轴为 Y 轴 ，元素从下到上排列
2、justify-content : 设置主轴上子元素的排列方式（当主轴为X轴时）
（1）、flex-start : 元素左对齐 （默认，结果与上面的row 相同）
（2）、flex-end : 元素右对齐（类似float:left, 与上面的row-reverse不同，它不会改变排列方式）
（3）、center : 元素居中对齐
（4）、flex-around : 平均分配剩余空间
（5）、flex-between : 两侧贴边再平均分配剩余空间
3、flex-wrap : 设置子元素是否换行
（1）：nowrap ：不换行（默认）
（2）：wrap : 换行
4、align-items : 设置侧轴子元素的排列方式，适合内容为单行时使用（当侧轴为Y轴时）
（1）：flex-start : 元素上对齐（默认，结果类似column）
（2）：flex-end : 元素下对齐
（3）：center : 居中
（4）：stretch : 拉伸，内容拉伸到和父级一样高
5、align-content : 设置侧轴子元素的排列方式，适合内容为多行时使用（当侧轴为Y轴时）
（1）：flex-start : 元素上对齐（默认，结果类似column）
（2）：flex-end : 元素下对齐
（3）：center : 居中
（4）、flex-around : 平均分配剩余空间
（5）、flex-between : 两侧贴边再平均分配剩余空间
6、flex-flow : 复合属性，同时设置direction 和 wrap
常见的子项属性
1、flex : num : 定义子项目多少份分配剩余空间（默认是0，根据父盒子的剩余空间计算）
2、align-self : 设置子项目在侧轴的排列方式，默认继承父级的排列方式
3、order : 定义子项目在主轴的排列顺序（默认都是0，数值越小排的越靠前）
六、rem + less + 媒体查询
1、rem基础
（1）、em : 是相对于父元素的字体大小来定的
（2）、rem : （root em）
rem的基准是相对于html的字体大小（font-size）定的
如根元素设置font-size为12px,则其他元素设置的2em就等于24px
（3）、rem的优点就是通过修改html里面的文字大小来改变页面中元素的大小，方便整体控制
2、媒体查询 （Media Query 是css3中的属性）
（1）、媒体查询可以针对不同屏幕尺寸去设置不同的样式
（2）、语法规范
@media mediatype and not|and|only （media feature）{
CSS（code）;
}
mediatype : 查询类型
将不同终端设备划分成不同的类型，称为媒体类型
all : 所有类型
print : 用于打印机和打印预览
screen : 用于电脑屏幕，平板电脑，智能手机等
例如 ： @media screen and (min-width : 980px){
html{ font-size : 50px ; }
} //当屏幕宽度大于等于 980px时
注： min-width : 表示 大于等于 ， max-width : 表示 小于等于
（3）建议尺寸从小到大写
（4）引入资源 （如针对不同屏幕大小，调用不同的CSS文件）
<link rel="stylesheet" href="s320.css" media="screen and (max-width : 639px)">
<link rel="stylesheet" href="s640.css" media="screen and (min-width : 640px)">
3、less
less是一门css拓展的语言，css预处理语言
less中引入另一个less文件 ： @import "less文件名，不用加后缀"
（1）、less编译
html不能直接解析less文件，需要通过编译转换为css文件
vscode的应用商店搜索 easy less，安装后在less文件里每次保存都会生成对应的css文件
（2）、less变量语法
@变量名 ： 值 ;
注：变量名不能以数字开头，不能用特殊符号，用@前缀，大小写敏感
例如 ： @color : "#ccc";
css属性中 color ： @color ;
（3）、less嵌套
I、子元素的样式直接写在父元素里
如 div{
a{ color : "#ccc"; }
}
II、伪类，伪元素，交集选择等要在内层选择器前加上&
如 a{
&:hover{ color : "red"; }
}
（4）、less运算
less中任何数字，颜色或者变量都可以参加运算
注：加减乘除（运算符号）两侧要有空格
两个运算数只有一个有单位，结果为这个单位
如果两个都有单位，以第一个运算数的单位为准
4、如何通过rem+less+媒体查询写移动端页面
（1）、将屏幕划分成若干等分（这里假设为15等份）
（2）、利用媒体查询动态设置html里的字体大小
如：若屏幕大于等于 320px时，font-size为 320px / 15
若屏幕大于等于540px时，font-size为 540px / 15
若屏幕大于等于750px时，font-size为 750px / 15
（3）、页面元素的rem值 = 页面元素在750px像素下的px值 / 屏幕为750px的font-size
得到一个比例
七、rem + flexible.js
1、原理 ： 将页面划分成10等份
2、需要安装一个将px转成rem的插件 ——> cssrem
它默认html的font-size是16px,需要到setting.json中把它设置为最大屏幕下的font-size
3、flexible是根据当前屏幕的宽度除以10来计算font-size的，假设我当前需要的最大宽度为750px时，
就需要加上限定：@media screen and (min-width: 750px){
html{ font-size: 75px; }
}
八、bootstrap的栅格系统
1、初始化时需要加上如下
//以IE最高版本内核进行渲染
<meta http-equiv="X-UA-Compatible" content="ie=edge">
//兼容html5和媒体查询
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
<![endif--]
2、bootstrap预定义了 .container类
（1）、响应式布局的容器，固定宽度，将内容划分成12份
（2）、定义了左右15px的内边距，在定义 .col外加上 .row 就不会有15内边距
（3）、大屏（screen >=1200px）宽为1170px .col-lg-*
中屏（screen >=992px）宽为970px .col-md-*
小屏（screen >=768px）宽为750px .col-sm-*
超小屏（screen <768px）宽为100%px .col-xs-*
（4）、假设我现在需要最大宽度为1280时，用媒体查询定义
@media screen and (min-width : 1280px){
body{ width: "1280px"; }
}
3、预定义了 .container-fluid类
（1）、运用流式布局，用百分百宽度，适合单独做移动端开发
4、列偏移
.col-md-offset-* //可以将列向右偏移
5、列排序 （比如想讲后面的列排到前面）
.col-md-push-* //推，往右推几份
.col-md-pull-* //拉，往左拉几份
6、响应式工具
根据屏幕的大小，对某些元素进行隐藏
.hidden-xs ——> 超小屏幕时隐藏
.hidden-sm ——> 小屏幕时隐藏
.hidden-md ——> 中屏幕时隐藏
.hidden-lg ——> 大屏幕时隐藏
注：.visible-....与之相反
原文: https://www.cnblogs.com/hxblogs/p/13334318.html
标签：