SEO优化首页 > 网站建设知识 > 什么是响应式?响应式布局的详细介绍

什么是响应式?响应式布局的详细介绍

[导读]:什么是响应式?响应式布局的详细介绍 关键词: 响应式 响应式布局 我们知道有一种网站叫响应式网站,可以根据屏幕的不同,自动调整页面大小以达到最佳观看样式。那么什么是什么...

  什么是响应式?响应式布局的详细介绍

  关键词: 响应式 响应式布局

  

响应式布局

 

  我们知道有一种网站叫响应式网站,可以根据屏幕的不同,自动调整页面大小以达到最佳观看样式。那么什么是什么是响应式?响应式布局是怎样的?下面和深圳网站建设公司文东网络科技的小编一起来了解一下吧。

  响应式

  响应式:根据不同的设备、不同的宽度、不同的特性、对页面上内容的样式做出相应的调整

  媒询 媒体查询

  显示设备

  @media

  只有满足所有查询条件的时候,里面的样式才会被解析

  all 所有媒体

  braille 盲文触觉设备

  embossed 盲文打印机

  print 手持设备

  projection 打印预览

  screen 彩屏设备

  speech ‘听觉’类似的媒体类型

  tty 不适用像素的设备

  tv 电视

  and 用来链接多个查询条件

  min-width : 大于等于

  max-width: 小于等于

  写一个范围,在这个范围内使用这种样式

  响应式-像素比

  媒体特性;

  min-width:1000px 当屏幕宽度大于等于1000的时候会被解析

  max-width:1300px 当屏幕宽度小于等于1300的时候会被解析

  -webkit-min-device-pixel-ratio 最小像素比

  -webkit-max-device-pixel-ratio 最大像素比

  orientation:portrait

  (指定输出设备中的页面可见区域高度大于或等于宽度)

  orientation:landscape

  (除portrait值情况外,都是landscape)

  

  响应式引入的多种写法

  @import "css/a.css" all and (min-width:800px);

  /* 宽度满足800-999的时候,只会引入a.css样式表 *

  @import "css/b.css" all and (min-width:1000px);

  /* 宽度满足1000-1199的时候,会同时引入a和b.css这两个样式表,后者覆盖前者 *

  @import "css/c.css" all and (min-width:1200px);

  /* 宽度满足1200的时候,会同时引入a和b、c.css这三个样式表,后者覆盖前者 */

  /* 同时会满足多个样式的查询条件,这种方式引入样式表要注意样式表的顺序 */

  @import "css/a.css" all and (min-width:800px) and (max-width:999px);

  /* 宽度满足800-999的时候,只会引入a.css样式表 */

  @import "css/b.css" all and (min-width:1000px) and (max-width:1199px);

  /* 宽度满足1000-1199的时候,引入b.css样式表*/

  @import "css/c.css" all and (min-width:1200px);

  /* 宽度满足1200的时候,引入c.css样式表 */

  /* 因为同时只会满足一个样式表的查询条件,所以不需要太注意顺序 */

 

 百分比布局  

  

  当值给百分比的时候,根据谁来计算

  width 根据父级的宽度来来计算

  height 根据父级的高度

  margin 始终根据父级的宽度来计算

  top 根据(定位_绝对定位)父级的高度来计算

  left 根据(定位_绝对定位)父级的宽度来计算

  padding根据父级的宽度来计算

  translatX,Y 根据自身的宽高来计算

  行高的表示方法 : font:20px/1.2 ‘宋体’; 表示文字大小的1.2倍

  以上就是什么是响应式?响应式布局的详细介绍的详细内容!

本文来自投稿,不代表【文东网络】昆明SEO网站优化_SEM竞价托管_网站建设外包网络公司立场,如若转载,请注明出处:http://www.mingyouseo.cn/wzjs/236.html