首页 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
资讯 业界资讯 软件杂谈 编程开发 网站建设 网络观查 搜索引擎 移动应用 网站运营 网络地图
开发 移动开发 Web前端 架构设计 编程语言 互联网 数据库 系统运维 云计算 开发杂谈
[Web前端] 胡博君浅谈HTML5中的响应式布局
胡博君浅谈HTML5中的响应式布局
通过媒体查询的设置,我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种:
1、通过link标签:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />


2、CSS中直接设置:
@media screen and (max-width:479px) {
      /* 具体的CSS属性设置 */
  }





正常我们需要响应式Web设计的页面,在页面中都要加上viewport的设置:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

width=device-width:控制viewport的宽度,可以指定固定的值或者特殊的值,如device-width(设备宽度)。但是这个么设置有一个弊端,因为这个设置只有在竖屏状态下有
效,横屏状态下,返回的却还是和竖屏状态下一样的宽度。
initial-scale=1.0:告诉浏览器初始化页面时不要对页面进行任何缩放的操作。
maximum-scale=1.0:告诉浏览器阻止页面放大,但是这样一来也禁止了用户手动放大或缩小页面,怎么说呢,美好的东西也会存在缺陷吧。
minimum-scale=1.0:告诉浏览器阻止页面缩小,同样带来上面的问题。
user-scalable=no:告诉浏览器禁止页面缩放。
target-densitydpi=device-dpi:分辨率的设置,通常可以取值:device-dpi(使用设备自身的dpi作为目标dp,不发生缩放)、high-dpi(使用高分辨率,中低分辨率场景下会相

应缩小)、medium-dpi(使用中等分辨率,高低分辨率分别进行相应的放大和缩小,缺省值)、low-dpi(使用低等分辨率,中高分辨率相应放大)。

总结:设置了以上两个部分,就可以做简单的响应式布局了,记得一般手机的屏宽像素在320-640px之间,所以做布局的时候用max-width:640px;。这样的话就可以让宽度自适应了。





欢迎大家收看我的在线Java全套免费教学超清视频:
http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html   这是其中的一个视频连接,大家可以拖动到优酷视频下方,订阅我的账号,因为以后我会有更多视频免费提供
百度搜索:输入Fcs_D调的码农 ,或者输入"胡博君"就能看到我的很多视频
或者加我的微信号:fcsboy     我可以及时通过微信通知你们
QQ学习群:237053693

上一篇:遮罩,在指定元素上进行遮罩
下一篇:

 此文从网络中自动搜索生成,不代表本网站赞成被搜索网站的内容或立场    查看原文
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年9日历
2018-9-25 18:39:14
 
  网站联系 软件世界网-www.sjsjw.com ©2014 蜀ICP备06016416号 三峰网旗下网站