0

0

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

不言

不言

发布时间:2018-09-27 10:38:38

|

5528人浏览过

|

来源于php中文网

原创

本篇文章给大家带来的内容是关于什么是响应式?响应式布局的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

响应式

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

媒询  媒体查询
    显示设备

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

    all         所有媒体
    braille     盲文触觉设备
    embossed    盲文打印机
    print       手持设备
    projection  打印预览
    screen      彩屏设备
    speech      ‘听觉’类似的媒体类型
    tty         不适用像素的设备
    tv          电视

    and  用来链接多个查询条件

    min-width :  大于等于
    max-width:   小于等于

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

cqcms通用企业建站(PC+wap)2.9
cqcms通用企业建站(PC+wap)2.9

cqcms通用企业建站介绍 苍穹企业网站管理系统(CQCMS)软件是国产PHP网站内容管理系统:CQcms内容管理系统 ,它将成为您轻松建站的利器。模板全部使用文件形式保存,对用户设计模板、网站升级转移均提供很大的便利,健壮的模板标签为站长DIY自己的网站提供了强有力的支持。MVC框架,自定义标签,模板文件修改非常方便,PC+WAP响应式布局,一个域名,自动识别终端,一个后台同时管理PC和wap。

下载
 

响应式-像素比

媒体特性;
    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倍

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

42

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

46

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

202

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

341

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

16

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

100

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

75

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

67

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 23.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号