BODY background=自适应大小_自适应（电脑/平板/手机）网页，自适应网页设计练习总结...

刚好写了个练习，应该是这种效果吧！

电脑端：

电脑

手机端：（当然还可以写平板页面啦）

iphone

①将网页调整权交给网页（html中）

- <head>标签中加入一行viewport（网页默认的宽度和高度）元标签

<meta name="viewport" content="width=device-width， initial-scale=1" />

width=device-width：网页宽度默认等于屏幕宽度

initial-scale=1；1代表网页初始大小占屏幕面积的100%

- 注意：老式浏览器（例如：IE6、7、8），需要使用css3-mediaqueries.js，如下

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

②禁止使用绝对宽度（css中）

不可：以下这种代码不可使用

width：10px； <!-- 这种代码不可行 -->

可行：以下两种代码均可

width: 20%;
width:auto;

③静止对字体使用固定大小（css中）

不可：以下这种代码不可使用

font-size: 12px

可行：以下代码均可行

font-size:1.2em

补充：浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。于是我们就可以通过这个等量关系进行计算了！若已经写好的网页字体的px直接除以16就是em了。

body {font: normal 100% Helvetica， Arial， sans-serif;
}<!--html中-->

④得是流动布局（css中）

- 就是使用float

#father .panel_text{background-color: #F5F5F2;float: left;margin-left: -88%;margin-top: 15%;width:295%;  height:200%;
}

⑤让网页选择适应屏幕的css，就像Java等语言中的if判断（在html中）

利用css3中的Media Query模块

提示：下面if、if else只是方便解释写的，直接将下面代码代码框的代码放在<meat>标签里

if（如果屏幕宽度小于400像素）{

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />

}else if（如果400像素<屏幕宽度<600像素）{

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />

}

⑥还有图片啦！

写这个简易页面时就踩了一个坑，图片没有设置。。。

css代码是具体情况，我做的练习页面是100%，但最好根据屏幕设置对应分辨率的图片！

----------------------------------------------------------------------------------------------------

end：第⑤步（补充类，另外一种方法）css3中@media的使用（根据屏幕，在一个css文件中判断使用哪段css代码）

先看看定义：

- 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

- @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

以下代码意思：如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {body {background-color:lightblue;}
}

最后来个总结吧：印象最深的就是自适应的思维和物理学很近有木有！由于物体可以选取其他不同的东西做参考，所以物理书：“运动是绝对的，静止是相对的”那迁移到这个代码上也是一样啦！网页对应不同的屏幕标准得自动适应，那代码就得采用相对的，而不是绝对的！

BODY background=自适应大小_自适应（电脑/平板/手机）网页，自适应网页设计练习总结...相关推荐

苹果cmsV10韩剧TV简约影视网站源码电脑和手机模板自适应
苹果cmsV10韩剧TV简约影视网站源码电脑和手机模板自适应原创带后台设置多功能苹果CMSv10自适应seo高权重大屏模板苹果cms10好看的模板自适应_苹果cmsv10高端模板_苹果cmsv10 ...
html meta页面自适应,【转载·收藏】 html5手机网站自适应需要加的meta标签
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放下面是对于这个标签的具体说明: viewport 语法介绍: cont ...
layui的轮播图片自适应大小_解决Layui 表格自适应高度的问题
解决Layui 表格自适应高度的问题鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css .layu ...
css 字体大小_用一个 CSS 属性打造自适应网站
英文 | https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9 作者 | Dip Vachhani 用一个c ...
layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
java 字体自适应大小_响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...
怎么退出自适应巡航_买车选配置，自适应巡航or定速巡航
消费者买车时候各种配置眼花缭乱,如何看破销售术语,选择自己需要的配置呢? 先说结论:自适应巡航优于定速巡航. 自适应巡航和定速巡航都可以解放驾驶员的右脚,让车辆维持在一个车速一直跑.但是道路前面的车减 ...
怎么退出自适应巡航_减少系统干扰体验ACC自适应巡航
13年前,一汽-大众将速腾(参数|询价)引入国内,凭借着众多当时较少应用的技术,让它成为了这个级别的标杆产品.现在,最新一代车型来到我们面前,今天的消费者需求相比多年前发生了明显的改变,当下备受瞩目的 ...
Matlab自适应均线_李洋：卡夫曼自适应移动平均线MATLAB代码
SMA:Simple MA 简单平均线 EMA:Exp MA指数平均线 AMA:Adaptive MA 卡夫曼自适应移动平均算法过程卡夫曼自适应移动平均算法过程整理 http://www.matl ...

BODY background=自适应大小_自适应（电脑/平板/手机）网页，自适应网页设计练习总结...

BODY background=自适应大小_自适应（电脑/平板/手机）网页，自适应网页设计练习总结...相关推荐

最新文章

热门文章