HTML5与CSS3视口-retina屏幕适配
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;
}
</style></head>
<body>
<div class="box"></div></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;
}
</style></head>
<body>
<div class="box"></div></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; /*方法二：设置盒子的计算方式从边框开始算*/
}
</style></head>
<body>
<div class="box"><a href="#">菜单</a><a href="#">菜单</a><a href="#">菜单</a><a href="#">菜单</a>
</div></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%;}
}
</style></head>
<body>
<div class="box"><a href="#">1.哈哈哈</a><a href="#">2.哈哈哈</a><a href="#">3.哈哈哈</a><a href="#">4.哈哈哈</a>
</div></body>
</html>
转载于:https://blog.51cto.com/13742773/2337203
HTML5与CSS3视口-retina屏幕适配相关推荐
- html5 css3替换图片,移动Web—CSS为Retina屏幕替换更高质量的图片
特别声明:此篇文章根据Stéphanie Walter 的英文文章<The Mobile Web: CSS Image Replacement for Retina Display Device ...
- vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- HTML5游戏引擎（十六）-屏幕适配——showAll模式 noScale模式 noBorder模式 exactFit模式 fixedWidth模式 fixedHeight模式
HTML5游戏引擎(十六)-屏幕适配--showAll模式 & noScale模式 & noBorder模式 & exactFit模式 & fixedWidth模式 & ...
- 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
一. iOS 项目简介 1. iOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...
- 白鹭引擎拉伸高度_屏幕适配方案-Egret社区-教程文档-白鹭引擎-Egret Engine-免费开源HTML5游戏引擎 - Powered by Discuz!...
本帖最后由 云里雾里 于 2017-9-17 17:55 编辑 上周发了个贴 关于屏幕适配问题 有些小伙伴还是有这需求的.由于本人最近在研究u3d方面的东西,时间不多.今天上午抽个时间快速说下. 直接 ...
- iOS视网膜(Retina)屏幕的适配方法
转自:http://www.penddy.com/mobile-client-knowledge-processing-1-ios-retinal-adaptation-of-the-retina-s ...
- retina屏幕，适配
点击打开链接 retina屏幕 http://www.jianshu.com/p/84c5cb3a485a 前端开发终端适配方案
- 前端开发之——网页如何适配Retina屏幕
前言 随着2012年苹果发布第一款Retina Macbook Pro(以下简称RMBP),Retina屏幕开始进入笔记本行业.两年过去了,RMBP的市场占有率越来越高,且获得了一大批设计师朋友的青睐 ...
- html5 retina 1像素,HTML5 canvas 在 iPhone 4 retina 屏幕上的优化
HTML5 canvas 在 iPhone 4 retina 屏幕上的优化 mac52ipod· 2011-02-11 阅读数 7793 随着 iPhone4 的推出, retina 屏在移动设备中被 ...
最新文章
- linux 内核编译错误 gcc: error: elf_i386: No such file or directory
- rmi 反序列化漏洞_IDEA动态调试(二)——反序列化漏洞(Fastjson)
- int*与(int*)的差别
- 浅谈一致性Hash原理及应用
- 零垃圾创建数百万个对象
- linux下无法创建组
- HDFS YARN zookeeper HBASE HIVE HIVE hwi的启动
- 使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧
- (executor 1 exited caused by one of the running tasks) Reason: Executor heartbeat timed out after
- Lucas 与 ExLucas
- Win11安装Android子系统
- elasticsearch安装和使用
- Ubuntu 16.04 如何进入系统文件/etc/profile修改内容
- Linux FQ队列操作
- 给某汉化联盟讲些历史故事
- 浅谈云函数的代理IP利用面
- 我整理了十套 SpringBoot 项目完整教程「源码+视频+讲义」
- WORD自动编号的图表标签重新编号
- Verilog语法-模块module[Day2学习笔记]
- vue全局注册一个文件夹下所有的组件