响应式

什么是响应式网页?就是一套代码适配不同的屏幕宽度,不同的适配

媒体查询:能够根据设备宽度的变化,设置差异化样式

开发常用写法: 媒体特性常用写法  max-width  min-width 

        @media (媒体特性) {

           选择器 {

               样式

           }

        }

完整写法:@media 关键词 媒体类型 and (媒体特性) { CSS 代码 }

关键词:and  only  not

媒体是用来区分设备类型的,如屏幕设备、打印设备等,其中手机、电脑、平板都属于屏幕设备。
    类型名称       值      描述      
     屏幕       screen   带屏幕的设备  
    打印预览        print     打印预览模式    
     阅读器         speech     屏幕阅读模式
    不区分类型         all   默认值,包括以上3种情形
媒体特性主要用来描述媒体类型的具体特征,如当前屏幕的宽高、分辨率、横屏或竖屏等。
    特性名称      属性             值
   视口的宽和高    width、height           数值
   视口最大宽或高  max-width、max-height         数值
   视口最小宽或高  min-width、min-height        数值
    屏幕方向     orientation       portrait: 竖屏  landscape: 横屏
 因为/* CSS属性都有层叠性 */
所以:min-width(从小到大)  max-width(从大到小)
外链式CSS引入
    <link rel="stylesheet" media="(min-width: 1200px)" href="./two.css" >
    <link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css" >
BootStrap简介:(使用BootStrap框架快速开发响应式网页)
Bootstrap是由 Twitter 公司开发维护的前端UI框架,它提供了大量编好的CSS样式,允许开发者结合一定HTML结构及JavaScript,快速编写功能完善的网页及常见交互效果
中文官网:https://www.bootcss.com/
使用步骤:1.引入:Bootstrap提供的CSS代码
      <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
     2.调用类:使用Bootstrap提供的样式  container:响应式布局版心
Bootstrap栅格系统:(使用Bootstrap栅格系统布局响应式网页)
栅格化是指将整个网页的宽度分成若干等份  Bootstrap3默认将网页分成12等份
          超小屏幕      小屏幕      中等屏幕      大屏幕
响应断点      <768px        >=768px      >=992px         >=1200px
别名         xs         sm        md          lg
容器宽度      100%        750px       970px       1170px
类前缀       col-xs-*         col-sm-*       col-md-*      col-lg-*
列数         12         12         12          12
列间隙        30px        30px       30px       30px
.container是Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
.container-fluid也是Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为100%。
分别使用.row类名和.col类名定义栅格布局的行和列。
注意:1. container类自带间距15px;  2. row类自带间距-15px
全局样式:目标:掌握BootStrap手册用法,使用全局CSS样式美化标签
分类:布局样式  内容美化样式
手册用法:
BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点。
网站首页→BootStrap3中文文档→全局CSS样式→按分类导航查找目标类
 组件:目标:使用BootStrap组件快速布局网页
BootStrap提供的常见功能,包含了HTML结构和CSS样式。
使用方法:引入BootStrap样式  复制结构,修改内容
Glyphicons字体图标:目标:使用Glyphicons字体图标实现网页中的图标效果
Glyphicons字体图标的使用步骤:HTML页面引入BootStrap样式文件  准备字体文件(注意路径)  空标签调用对应类名(glyphicon  图标类)
内容少,企业站,适合改成响应式
内容多,类似淘宝,京东,做不了(电商站因为内容太多做不到全部响应式)应该做成PC端、移动端两个网站

随机推荐

  1. week_6

    Andrew Ng 机器学习笔记 ---By Orangestar Week_6 (1) In Week 6, you will be learning about systematically im ...

  2. 解读JVM级别本地缓存Caffeine青出于蓝的要诀3 —— 讲透Caffeine的数据驱逐淘汰机制与用法

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中,我们聊了下Caffein ...

  3. vulnhub靶场之HACKABLE: III

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Hackable: III,下载地址:https://download.vulnhub.com/hackable/hackable3.ova,下 ...

  4. 1_ES6中拓展运算符的使用

    一,拓展运算符(...) 拓展运算符(...):它会以参数序列的形式输出,更白话讲,比如数组,它可以把数组里面的东西一个一个的输出出来,例如 1 let arr1 =["你",&q ...

  5. 如何使用Redis和RabbitMQ实现一个学生抢课系统(可类比商品秒杀系统)

    1.如何使用Redis和RabbitMQ实现一个学生抢课系统(可类比商品秒杀系统) 电商项目中的秒杀场景我们都很常见,不只是京东和淘宝现在很多的小程序公众号也有做现时限购的秒杀场景,那么如何做一个秒杀 ...

  6. 这可能是Matplotlib和Seaborn最全的入门文档

    matplotlib是python第一个数据可视化库,在数据分析,可视化领域的地位和贡献是无法磨灭的.但也正是因为有了这位老大哥的出现给后续基于matplotlib实现的绘图库实现了可能. 而对于绘图 ...

  7. post方法易错地方

    <body> <h1>登录</h1> <input type="text" placeholder="请输入用户名" ...

  8. JDK9对集合添加的优化-Debug追踪

    JDK9对集合添加的优化 通常,我们在代码中创建一个集合(例如,List或Set ),并直接用一些元素填充它.实例化集合,几add方法调用,使得代码重复. package A_Lian_one.dem ...

  9. 你想成为.Net 7的技术高手吗?来这里看看

    前言: 你是否时常觉得,整天搞些Curd和增删改查.这些毫无意义的东西,完全是浪费生命.想要进阶,成为高手.却苦于找不到方法,没有一套系统性的东西. 有鉴于此,新建了一个群,方便大家一起交流和分享一些 ...

  10. 程序员必备的数据库知识 2:Join 算法

    前言 连接(Join)是关系数据库重要特性,它和事务常被作为数据库与文件系统的两个重要区别项.程序员江湖一直流传着某某 baba 的神秘开发宝典,其中数据库部分有重要一条避免过多表的 Join,奈何 ...