HTML5与CSS3视口-retina屏幕适配

1.视口

公司主营业务：网站设计制作、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出衢州免费做网站回馈大家。

视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样会让移动端出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小，这样会让网页不容易观看，可以使用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

2.视网膜屏幕（retina屏幕）清晰度解决方案

图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用CSS样式强制把图像的尺寸设为原来图像尺寸的大小。

3.background新属性

（1）background-size：

length：用长度值指定背景图像大小，不允许负值

percentage：用百分比指定背景图像大小，不允许负值

auto：背景图像的真实大小

cover：将背景图像等比例缩放到完全覆盖容器，背景图像有可能超出容器

contain：将背景图像等比例缩放到宽度和高度与容器的宽高相等，背景图像始终被包含在容器内

4.PC级移动端页面适配方法

（1）全适配：响应式布局+流体布局

（2）移动端适配：

流体布局+少量响应式
基于rem的布局

（3）流体布局

就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数calc（）来设置高度，或者使用box-sizing属性将盒子设置为从边线计算盒子尺寸。

calc（）
可以通过计算的方式给元素加尺寸，比如：width：calc（25%-4px）;

box-sizing
content-box默认的盒子尺寸计算方式

border-box设置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内。

    菜单
    菜单
    菜单
    菜单

（4）响应式布局

式使用媒体查询方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）

    1.哈哈哈
    2.哈哈哈
    3.哈哈哈
    4.哈哈哈

本文标题：HTML5与CSS3视口-retina屏幕适配
文章转载：http://cdkjz.cn/article/gogidc.html