欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

h5和css3构建响应式网站

程序员文章站 2022-03-13 12:20:17
响应式页面组成 创建可伸缩图像 创建弹性布局网格 可以设置相对的max-width；默认的字体大小是16px；em宽度是基于元素字体大小 媒体查询 增强媒体类型方法，允许根据特定的设备特性定位样式，要调整网站的呈现样式，让其适应不同的屏幕尺寸 ......

响应式页面组成

  1. 灵活图像，媒体；资源尺寸使用百分比定义
  2. 流式布局，所有width属性使用百分比设定，水平属性通常使用相对单位（em,百分数，rem等）
  3. 媒体查询，根据媒体特征进行设计调整

创建可伸缩图像

  1. html中不指定width,height属性
  2. 在css表中使用max-width:100%；（不使用width:100%；会让图像竟可能填充容器，如果容器的宽度比图像宽，图像就会放大到超过本来尺寸，显示不好看）

创建弹性布局网格

  1. 元素的百分数宽度基于其父元素提供的可用空间：要指定的宽度（px为单位）/容器宽度（px） = 值；
  2. .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>

       

 

上一篇： 鸿蒙壁纸怎么动? 鸿蒙设置动态壁纸的技巧

下一篇： 前端四角定位代码实例

推荐阅读