关于html5和CSS3的屏幕自适应
我是刚刚学css3html5的小白，一直想要知道屏幕自适应，还有响应式如何做？是不是还需要学会其他的才能实现这个效果？
浏览 524回答 2
对~！先把最基础的属性理解透彻了，才考虑这些进阶的技巧，不要急
镜像__梦ing
自动调整布局(layout)；多多看看基础，css很重要吧，看下前端论坛
随时随地看视频阅读 22380
&&&&&&&&在日常的开放中，经常会遇到有背景图片的时候，现在不同屏幕大小的手机又很多，如何让背景图片自适应屏幕的大小了。
&&&&&&&&在网上搜了很多方法，有的还不一定的能解决问题。如下办法，是我经常使用，html代码如下：
&!DOCTYPE&html&
&&&&&head&
&&&&&/head&
&&&&&body&
&&&&&&&&&article&class="wrap"&
&&&&&&&&&&&&&header&
&&&&&&&&&&&&&&&&&div&class="bg-img"&
&&&&&&&&&&&&&&&&&&&&&img&src="img/bg.png"&&
&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&/header&
&&&&&&&&&/article&
&&&&&/body&
CSS 代码如下：
&&&&position:&
&&&&width:&100%;
&&&&height:&100%;
&&&&font-size:&0;
.bg-img&img{
width:&100%;
&&&&&&&&此方法的最大的问题是，其后的内容，需要设置属性z- 否则其后的内容会在图片之后，而不是覆盖在背景图之上。
& &最简便的方法如下：
&body&style="background-image:&url(img/bg.jpg);&background-size:&100%;"&
只需在body 中设置属性background-size:100% 即可，这种方法也有其缺点。
& &PS 昨天和同事交流后，background-size 设置为contain会更合适些。
& 著作权归作者所有
人打赏支持
码字总数 1595
HTML5 现在已经不是很前卫的东西了，越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效，这里面有菜单、按钮、图片...
学习html5从入门到精通，零基础新手也能看懂，无论你是唱歌，画画的艺术生，还是学习机械专业的工科生，或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些？ 1. HTML5可以同时在多种...
课工场CC老师
前言 HTML5一个相当出色的web技术，它不仅可以让你更加方便地操纵页面元素，而且可以通过canvas实现更多的动画特效，引进HTML5标准后，CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...
浪漫程序员
作为一个前沿的 Web 开发者，对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候，开发者们已经使用它们来小试牛刀了，如今这些先进技术已经遍地开发，特别是在移动端大...
HTML/CSS标签透明度效果的实现 在HTML+CSS编程中,实现半透明背景，通常有3中做法，分别是使用RGBA，PNG和CSS filter。 方法一. 第一种是HTML5的透明，在H5中支持透明背景颜色，但遗憾的是，H...
WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本，都需要做版本打包...
OK开始说正经的了。在之前一篇译文中，我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题，我们将从前文介绍过的"弹性布局结构"这方面出发，通过一个具体的实例...
WebApp与Native App的区别 Native App： 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本，都需要做版本打包，且需...
随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现...
简介 HTML5 canvas 最初起源于苹果（Apple）的一项实验，现在已经成为了web中受到广泛支持的2D快速模式绘图（2D immediate mode graphic）的标准。许多开发者现在利用它来实现众多的多媒体项...
没有更多内容
加载失败，请刷新页面
前言 关于NNS的介绍，这里就不多做描述，相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas，关于sgas介绍可以戳htt...
从MySQL全备文件中恢复单个库或者单个表 提取建库语句 sed -n '/^-- Current Database: db_cms/,/^-- Current Database: `/p' backup.sql & db_cms.sql & 提取ddl sed -e'/./{H;$!d;}' -e ......
一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式，在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...
Python在数据分析中越来越受欢迎，已经达到了统计学家对R的喜爱程度，Python的拥护者们当然不会落后于R，开发了一个个好玩的数据分析工具，下面我们来看看如何使用Python，来读红楼梦，绘制小...
1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......
相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门
Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然，目前Mybaties正在慢慢取代Hibernate，这是因为相比较Hibernate而言Mybaties性能更好，响应更快，更加灵活。我们在开...
编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改，以及不改变整体的原本意思的情况下，增加函数功能的新函数，因为这个新函数对旧函数进行了装饰...
原创小博客
黑暗中的生物：利用奇技淫巧快活生存 Daniel
1.今日导读 如果让你在伸手不见五指的黑暗当中生存，你能熬过几天呢？而大千世界，无奇不有。在很多你不知道的角落，有些生物在完全黑...
通过之前Spring Cloud系列教程中的《Spring Cloud构建微服务架构：服务容错保护（Hystrix服务降级）》一文，我们已经知道如何通过Hystrix来保护自己的服务不被外部依赖方拖垮的情况。但是实际...
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有背景自适应屏幕大小的写法（html5）
&&span style="color:#ac885b;"&html&
&&span style="color:#ac885b;"&head lang="en"&
&&span style="color:#ac885b;"&meta charset="UTF-8"&
&&span style="color:#ac885b;"&title&&/&span
style="color:#ac885b;"&title&
&&span style="color:#ac885b;"&style&
.container{
background-image: url(./1.jpg); background-repeat: repeat-x; background-size: cover; background-position: center center; }
&/&span style="color:#ac885b;"&style&
&/&span style="color:#ac885b;"&head&
&&span style="color:#ac885b;"&body class="container"&
&&span style="color:#ac885b;"&div class=""&
fdsafsad &&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&&&span
style="color:#ac885b;"&br&
&/&span style="color:#ac885b;"&div&
&/&span style="color:#ac885b;"&body&
&/&span style="color:#ac885b;"&html&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。移动页面HTML5自适应手机屏幕宽度
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。
1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
首先解释该标签的含义：
&meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&
如果你完全不了解这个标签的使用需要先百度一下。
解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080
等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。
&script type="text/javascript"&
var phoneWidth =
parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userA
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version&2.3){
document.write(‘&meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi"&‘);
document.write(‘&meta name="viewport" content="width=640, target-densitydpi=device-dpi"&‘);
document.write(‘&meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"&‘);
对于此标签还有以下需要分享：
1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。
2)、initial-scale=1.0
初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。
3)、手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。
以上是使用viewport标签的一些小体会，分享给大家。
3、百分比法，首先应明确一个概年，CSS中的百分比中的百指的是什么，我告诉你指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。
4、使用css3单位rem，有人这样解释rem，root-em，就是根部的em，想必em大家都懂的，那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。到这里我们也就了解了rem的用法了，那么怎么用rem来实现不同尺寸屏幕的自适应呢？在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者的差别请自行查阅），假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，这样如果html的font-size为100px，那么这个div的宽度用rem表示是多少呢？计算：div宽度dW2=dW1/100,px与rem之间很好换算，除以100就可以，这是假定屏幕宽度为640的，而不同宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算：100 /
640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
解释一下为什么把100作为一个缩放比例，用10或1不是更方便吗，这是因为大多数浏览器font-size的最小值为12px，所以只能用100了。所以会在头部加上这个JS代码
&script type="text/javascript"&
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
5、媒体查询，媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen
and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。
HTML5 移动页面自适应手机屏幕四类方法
移动页面HTML5自适应手机屏幕宽度几种办法
如何去设计一个自适应的网页设计或HTMl5
HTML5自适应手机屏幕
使PC端网页宽度自适应手机屏幕大小
HTML中设置网页自适应的MATE标签
HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
如何让网页自适应所有屏幕宽度
html css div自适应屏幕宽度，高度
HTML5----响应式（自适应）网页设计
没有更多推荐了，自适应轮播网页全屏背景，根据窗口大小保持背景图片比例。 - JavaScript,CSS,HTML5 - web - ITeye论坛
自适应轮播网页全屏背景，根据窗口大小保持背景图片比例。
锁定老帖子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
发表时间：&&
之前用拉伸背景，在使用标准电脑壁纸作为网页背景时遇到的情况是不同游览器内的可用面积不同，窗口内会使壁纸压缩变形。并且使用浏览器时也经常会改变窗口大小。演示地址是在dzzoffice中实际使用的背景效果。图片轮播速度为10分钟。下载的代码中，轮播图片的速度设置的是10秒钟。演示地址：
如果您也在使用dzzoffice，可以直接把这个代码作为动态壁纸添加进去使用。
描述: 下载
下载次数: 117
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术