网页实现自适应(学习)
一、允许网页宽度自动调整
首先,在网页代码的头部,加入一行viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是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]-->
二、不要使用绝对宽度
由于网页宽度会自动调整,所以,当元素宽度为固定值的时候,网页的自动调整会让页面变形。
尽量使用百分比或者auto来决定元素宽度。
width: xx%; width:auto;
三、字体大小要使用相对的
body {font: normal 100% Helvetica, Arial, sans-serif;}//上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {font-size: 1.5em; }//然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {font-size: 0.875em;}//small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
四、流动布局
流动布局的含义是,各个区块的位置都是浮动的,不是一成不变的
.main {float: right;width: 70%; }.leftBar {float: left;width: 25%;}
float的好处在于,如果宽度太小,放不下两个元素,后面的元素会自动滚到前面元素的下方,不会在水平方向溢出(overflow),从而避免了水平滚动条的出现
五、定位的使用
固定定位的使用一定谨慎,因为,固定定位没有办法跟随页面的宽高进行调整,所以页面会造成一些元素的偏移
绝对定位和相对的使用也要非常小心。
六、选择加载css
"自适应网页设计"的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件
<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />//上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />
//如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
//除了用html标签加载CSS文件,还可以在现有CSS文件中加载
@import url("tinyScreen.css") screen and (max-device-width: 400px);
七、css的@media规则
同一个css文件中,也可以根据不同屏幕分辨率,选择应用不同的css规则
@media screen and (max-device-width: 400px) {.column {float: none;width:auto;}#sidebar {display:none;}
//上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。}
八、图片的自适应
当页面缩小或放大时,页面中图片也应的对应缩小放大
img { max-width: 100%;}
//这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
这里注意:老版本的ie不支持max-width,所以可以写成
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图片失真现象昂,这个时候我们可以使用ie的专有命令
img { -ms-interpolation-mode: bicubic; }
或者Ethan Marcotte的imgSizer.js
addLoadEvent(function() {var imgs = document.getElementById("content").getElementsByTagName("img");imgSizer.collate(imgs);});
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现
参照 阮一峰老师的开发手册来学习。
网页实现自适应(学习)相关推荐
- 怎么实现手机端网页页面自适应调整
今天分享下"怎么实现手机端网页页面自适应调整"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
- 计算机网页基础课专业,关于《计算机应用基础》课程网页下的学习资源使用说明....
关于<计算机应用基础>课程网页下的学习资源使用说明. 关于<计算机应用基础>课程网页下的学习资源使用说明 各位同学:大家好! 07春学期已接近一半的时间了,新生对课程还需要更多 ...
- 网页版深度学习模型编辑器,搭建运行样样都行,还能3D可视化
最近,一款网页版深度学习模型编辑器面世了. 不用下载任何客户端应用.不用装任何插件.甚至连数据集都不用下载,直接在网页端就可以搭建.训练.运行神经网络,甚至还是3D可视的. 直接选择你需要的数据集,加 ...
- [2019][]自适应学习平台的关键技术与典型案例
自适应学习平台的关键技术与典型案例 概述 关键信息点 总结 点我下载论文 概述 论文着重分析了美国自适应平台Knewton涉及的关键技术方法.Knewton平台是自适应平台中的佼佼者,获得了多轮融资, ...
- [2016][34]基于大数据的牛顿(Knewton)平台自适应学习机制分析
自适应学习平台的关键技术与典型案例 1. 概述 2. Knewton平台 2.1 基础架构 2.1.1 数据收集与处理组件 2.1.2 推理与评估组件 2.1.3 个性化服务组件 2.2 数据模型 2 ...
- 自动解题批改与自适应学习 AI在教育行业的应用实践
自动解题批改与自适应学习 AI在教育行业的应用实践 因校内业务的需求,学霸君一直非常注重人工智能相关技术的研发.通用人工智能技术非常难做,但与垂直行业场景结合起来,降低算法的难度,使得算法找到用武之地 ...
- 自适应学习系统_如何建立适应性学习系统
自适应学习系统 Have you ever started a course, but thought it was too slow? Or too difficult? Wish you coul ...
- 【文献阅读2020】 像素级自适应学习的超分辨率Pixel-Level Self-Paced Learning For Super-Resolution
原文链接 github 摘要:近年来,基于深度网络的预测超分辨率图像在多个图像领域得到了广泛的应用.然而,随着这些网络的构建越来越深入,它们的训练时间也越来越长,这可能会引导学习者进行局部优化.为了解 ...
- AI+教育 I 69天流利说APP学习浅谈自适应学习
本文梳理了目前"AI+教育"场景的典型产品,然后基于我在英语流利说APP学习的"懂你英语"."地道发音2.0"等课程的学习体验,对自适应学习 ...
- 网页脚本编程学习笔记
网页脚本编程学习笔记 1.配置 此处以火狐浏览器为例: 1). 打开web控制台,调出查看器(用于查看该网页的HTML源代码).控制台(编写控制代码,可以实时操作,显示运行结果.报错,类似于MATLA ...
最新文章
- 模糊神经网络工具箱函数使用
- MATLAB从入门到精通-欧拉法与梯形法求解微分方程(含MATLAB源码)
- 四川大学计算机学院录取,四川大学计算机学院2018年硕士研究生招生拟录取名单及成绩公示...
- COCI CONTEST #3 29.11.2014 KAMIONI
- pandaboard ES学习之旅——2 ES环境搭建
- JQuery如何与数据库交互
- html 文本 多列显示,CSS3文本,字体和多列
- 【转】Linux内核调试方法总结
- Go Node.js 生成的exe公布成windows服务
- SQL注入之万能密码
- ecshop后台首页mysql_ecshop商城后台使用手册
- Java:等额本息还款计算
- 【NLP】神经网络语言模型(NNLM)
- DNS 的A记录、CNAME记录、mx记录
- git更新项目失败报错 protocol error: bad line length character: Acti
- 前端开发系列(十六)网页布局教程(2)
- Mac小技巧:同时选中多个文件
- python中的位运算符
- HT66F2390/STM32——AM2320温湿度传感器
- IC入门记录(持续更新)
热门文章
- three.js加载和使用纹理-设置material.bumpMap属性使用凹凸贴图创建皱纹(vue中使用three.js74)
- 仿网易云音乐切换主题
- go mod报错at revision v0.0.6: unknown revision v0.0.6
- 从零开始,直到···
- windows下配置host
- 推荐自己做的在线流程图、UML、架构图绘制网站
- 用计算机技术辅助语文教学,计算机技术在语文教学中的应用初探
- 手机电子邮件服务器是什么,什么是电子邮件服务器名?在哪找到接收邮件服 – 手机爱问...
- pyqtgraph基础入门(六):局部改变曲线颜色
- QSettings常用方法