h5和css3构建响应式网站

最新推荐文章于 2022-09-19 10:07:19 发布

weixin_30521649

最新推荐文章于 2022-09-19 10:07:19 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/gushiyoyo/p/8733047.html

版权

响应式页面组成

灵活图像，媒体；资源尺寸使用百分比定义
流式布局，所有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 ；
1. 　　only 确保旧的浏览器不读取余下的媒体查询，同时忽略链接的样式表
2. 　　not 对媒体查询的结果取反
type（类型）媒体类型，screen print 等
featrue: value ;使用需要加上 and ( min-width:480px)
视觉区域：浏览器显示页面的区域，不包含浏览器地址栏，按钮；
1. 　　媒体查询的width特性 ----- 视觉区域的宽度
2. 　　device-width特性 ------- 屏幕的宽度
3. 　移动端上显示网站缩小的样子，可以添加meta元素，使得视觉区域的宽度会被设置与设备宽度相同的值
```
<meta name="viewport" content="width=device-width,initial-scale=1"></head>
```

转载于:https://www.cnblogs.com/gushiyoyo/p/8733047.html

weixin_30521649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5和css3构建响应式网站

响应式页面组成灵活图像，媒体；资源尺寸使用百分比定义流式布局，所有width属性使用百分比设定，水平属性通常使用相对单位（em,百分数，rem等）媒体查询，根据媒体特征进行设计调整创建可伸缩图像html中不指定width,height属性在css表中使用max-width:100%；（不使用width:100%；会让图像竟可能填充容器，如果容器的宽度比图像宽，图...
复制链接

扫一扫