本文共 3033 字，大约阅读时间需要 10 分钟。
1.视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样会让移动端出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小，这样会让网页不容易观看，可以使用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <!--设置视口的宽，缩放--><title>窗口</title><style type="text/css">
.box{ width: 300px; height: 300px; background-color: gold;} </head>
<body>
</body>
2.视网膜屏幕（retina屏幕）清晰度解决方案
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用CSS样式强制把图像的尺寸设为原来图像尺寸的大小。
3.background新属性
（1）background-size：
length：用长度值指定背景图像大小，不允许负值
percentage：用百分比指定背景图像大小，不允许负值
auto：背景图像的真实大小
cover：将背景图像等比例缩放到完全覆盖容器，背景图像有可能超出容器
contain：将背景图像等比例缩放到宽度和高度与容器的宽高相等，背景图像始终被包含在容器内
<head>
<meta charset="utf-8"><title>scale</title><style type="text/css">
.box{ width: 300px; height: 300px; border: 1px solid #000; background: url(images/3_02.png) no-repeat; /*background-size: 100%,100%;*/ /*用指定大小，缩放不成功*/ /*background-size: auto; */ /*背景图真实大小*/ /*background-size: contain;*/ /*按宽高等比例缩放*/ background-size: cover; /*等比例缩放到完全覆盖容器*/ margin: 50px auto 0;} </head>
<body>
</body>
4.PC级移动端页面适配方法
（1）全适配：响应式布局+流体布局
（2）移动端适配：
流体布局+少量响应式
基于rem的布局（3）流体布局
就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数calc（）来设置高度，或者使用box-sizing属性将盒子设置为从边线计算盒子尺寸。
calc（）
可以通过计算的方式给元素加尺寸，比如：width：calc（25%-4px）;box-sizing
content-box默认的盒子尺寸计算方式border-box设置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内。
<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>流体布局</title><style type="text/css">
body{ margin: 0px;}.box a{ display: block; /*width: calc(25% - 4px);*/ /*方法一计算函数，整体25%-边框的4个像素*/ width: 25%; height: 100px; background-color: aqua; float: left; text-align: center; line-height: 100px; text-decoration: none; color: antiquewhite; border: 1px solid #5B5758; box-sizing: border-box; /*方法二：设置盒子的计算方式从边框开始算*/} </head>
<body>
</body>
</html>
（4）响应式布局
式使用媒体查询方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）
<!doctype html>
<html><head><meta charset="utf-8"><title>响应式布局</title><style type="text/css">
.box a{ display: block; width: 23%; height: 100px; background-color: blueviolet; margin: 1%; float: left; text-align: center; text-decoration: none; line-height: 100px;}@media (max-width:800px){ /*当屏幕小于800px执行以下样式*/ .box a{ width: 46%; margin: 2%; }}@media (max-width:500px){ /*当屏幕小于500px执行以下样式*/ .box a{ width: 94%; margin: 3%; }} </head>
<body>
</body>
</html>
转载于:https://blog.51cto.com/13742773/2337203