-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-07-25
来源 ：
阅读 1578
评论 0
摘要：本篇教程探讨了如何构建响应式网站，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
本篇教程探讨了如何构建响应式网站，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
响应式页面组成
1. 灵活图像，媒体；资源尺寸使用百分比定义
2. 流式布局，所有width属性使用百分比设定，水平属性通常使用相对单位（em,百分数，rem等）
3. 媒体查询，根据媒体特征进行设计调整
创建可伸缩图像
1. html中不指定width,height属性
2. 在css表中使用max-width:100%；（不使用width:100%；会让图像竟可能填充容器，如果容器的宽度比图像宽，图像就会放大到超过本来尺寸，显示不好看）
创建弹性布局网格
1. 元素的百分数宽度基于其父元素提供的可用空间：要指定的宽度（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 */
}
媒体查询
增强媒体类型方法，允许根据特定的设备特性定位样式，要调整网站的呈现样式，让其适应不同的屏幕尺寸
1. 可以包含在媒体查询里的特性：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设置像素比）
2. 使用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>
3. 在样式表中使用@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;
}
}
4. logic（逻辑）值为：noly 和 not ；
1. only 确保旧的浏览器不读取余下的媒体查询，同时忽略链接的样式表
2. not 对媒体查询的结果取反
5. type（类型）媒体类型，screen print 等
6. featrue: value ;使用需要加上 and ( min-width:480px)
7. 视觉区域：浏览器显示页面的区域，不包含浏览器地址栏，按钮；
1. 媒体查询的width特性 ----- 视觉区域的宽度
2. device-width特性 ------- 屏幕的宽度
3. 移动端上显示网站缩小的样子，可以添加meta元素，使得视觉区域的宽度会被设置与设备宽度相同的值
<meta name="viewport" content="width=device-width,initial-scale=1"></head>
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
