h5和css3构建响应式网站
响应式页面组成
- 灵活图像，媒体；资源尺寸使用百分比定义
- 流式布局，所有width属性使用百分比设定，水平属性通常使用相对单位（em,百分数，rem等）
- 媒体查询，根据媒体特征进行设计调整
创建可伸缩图像
- html中不指定width,height属性
- 在css表中使用max-width:100%；（不使用width:100%；会让图像竟可能填充容器，如果容器的宽度比图像宽，图像就会放大到超过本来尺寸，显示不好看）
创建弹性布局网格
- 元素的百分数宽度基于其父元素提供的可用空间：要指定的宽度（px为单位）/容器宽度（px） = 值；
.page{ max-width:960px; } .main{ width:62.5%; /*要求宽度(600px)/容器宽度（960px）= 62.5%*/ }可以设置相对的max-width；默认的字体大小是16px；em宽度是基于元素字体大小
.page{ max-width:60em; /*960px / 16px = 60 */ }
媒体查询
增强媒体类型方法，允许根据特定的设备特性定位样式，要调整网站的呈现样式，让其适应不同的屏幕尺寸
- 可以包含在媒体查询里的特性：width,height,device-width(设备宽度),device-height,orientation(方向),aspect-ratio(高宽比)，color，color-index(颜色数),monochrome(单色)，resolution(分辨率),scan(描述),grid（栅格），-webkit-device-pixel-ratio（webkit设备像素比），-moz-device-pixel-ratio（mozilla设置像素比）
- 使用link元素的media属性
<head> <link rel="stylesheet" href="your-styles.css" media="logic type and (feature:value)" /> <!-- 仅用于支持媒体查询且视觉区域不低于480px的浏览器 --> <link rel="stylesheet" href="your-style.css" media="only screen and (min-width:480px)"> </head> - 在样式表中使用@media规则
@media logic type and (feature:value){ /* 目标css样式规则写在这里 */ } /* the logic is only the type is screen the feature:value is min-width:480px */ @media only screen and (min-width:480px){ p { color:red; font-weight:bold; } } - logic（逻辑）值为：noly 和 not ；
- only 确保旧的浏览器不读取余下的媒体查询，同时忽略链接的样式表
- not 对媒体查询的结果取反
- type（类型）媒体类型，screen print 等
- featrue: value ;使用需要加上 and ( min-width:480px)
- 视觉区域：浏览器显示页面的区域，不包含浏览器地址栏，按钮；
- 媒体查询的width特性 ----- 视觉区域的宽度
- device-width特性 ------- 屏幕的宽度
- 移动端上显示网站缩小的样子，可以添加meta元素，使得视觉区域的宽度会被设置与设备宽度相同的值
<meta name="viewport" content="width=device-width,initial-scale=1"></head>
h5和css3构建响应式网站的更多相关文章
- Skeljs – 用于构建响应式网站的前端开发框架
skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...
- 使用 Responsive Elements 快速构建响应式网站
Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...
- html 构建响应式网站之viewport的使用
在网页代码的头部,加入一行viewport元标签 <!DOCTYPE html> <html lang="en"> <head> <met ...
- 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点
随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...
- 了解Bootstrap和开发响应式网站
什么是Bootstrap? Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CS ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- css媒体查询：响应式网站
css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...
随机推荐
- tableview setData 设置数据（结构体对象）
定义设置的对象类型 Q_DECLARE_METATYPE(LISTITEMDATA *) 设置数据类型 LISTITEMDATA *ptask = &(const_cast<LISTIT ...
- dubbo学习总结二 服务端
服务端主要执行对底层数据库的操作 主要分层为 api +dao+ filter+ util+... 首先 dubbo 服务端有一个dubbo配置文件 dubbo:application 定义应用名称 ...
- P4python: python interface to Perforce API
P4python is the python interface to Perforce API, it helps to do Perforce operations through python. ...
- GIT团队合作探讨之二--Pull Request
pull request是github/bitbucket给开发人员实现便利合作提供的一个feature.他们提供一个用户友好的web界面在进代码之前来讨论这些变更. 简单说,pull request ...
- js 巧妙去除数组中的重复项
1.代码如下: var toObject = function(a) { var o = {}; for (var i=0, j=a.length; i<j; i=i+1) { // 这里我调整 ...
- 【Leetcode】【Medium】Swap Nodes in Pairs
Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...
- nginx的开机自启、server命令启动、nginx.conf配置
1.将Nginx设置为开机自动启动 a.当上面6步完成之后,说明安装已经完全成功了,但是每次开机我们面临的一个问题,就是每次都要执行命令(1: cd /usr/local/nginx/sbin/ ...
- git-day1-安装和基础使用
Git介绍 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件 ...
- Ubuntu查看版本信息
关于查看Ubuntu的版本信息,我们会用到两个命令uname和cat. uname命令 这个命令用于显示系统信息.其参数为: -a 显示所有系统信息.其中包括机器名.操作系统名.内核名称等. 以下为执 ...
- jar包解压
jar -xvf project.jar 解压到当前文件夹