移动web: 响应式

层叠样式表广东分表
174 阅读1分钟

一、响应式网页布局：

效果

  • 随着屏幕尺寸变化，CSS样式也跟着变化【PC端与移动端同一套代码结构】

    ①网页越复杂，内容越多，越无法做响应式布局【PC端与移动端分开做】

    ②响应式布局：网页内容简洁，两侧留白多

  • 自适应效果：随着屏幕尺寸的变化，网页元素尺寸也作相应的变化。【设置相对单位】

二、媒体查询

根据设备【宽度】的变化，设置差异化样式

@media (width:500px){
    选择器{ 
		需要修改的属性
 	}
}

image.png

① 1个小括号里只能写1个媒体特性

② min-width:实心，<= 没有显示对应样式，受分辨率影响

③ 多个媒体特性时， and 前后有空格

image.png

  • 这种写法，需要同时写 【下限和上限】

image.png

  • 完整写法

    • 关键词：and only not

    • 媒体类型：区分设备类型

      image.png

    • 媒体特性：描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏

      image.png

      • 宽/高 > 1 横屏

      • 宽/高 < 1 竖屏

  • 外链式CSS引入

    image.png

三、BootStrap

1、UI框架：将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。

作用 ➢ 基于框架开发，效率高，稳定性高。

  • 了解BootStrap

    • 是一个做网页的框架（目前最流行的WEB前端框架），作用：用它提供的样式和组件快速写网站【引用】

    image.png

2、使用【 BootStrap框架】快速开发【响应式网页】

  • 步骤

①下载bootstrap文件 v3.bootcss.com/

1 image.png

2 image.png

②引入

image.png

③选择需要的框架效果

四、布局容器

image.png 栅格系统 【原理：浮动】

  • ①Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
  • ②栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

image.png

image.png

相邻兄弟选择器 +

p+div 只能是p标签下面相邻的div盒子（且相邻的一个，相邻弟弟）p标签不做任何改变，

p~div p标签下面相邻的div盒子（所有下面相邻）p标签不做任何改变，

image.png

引入Bootstraps

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">

1、只使ss样式，无需再引入 js文件 【常见：栅格系统、按钮、表单、图片及辅助类、响应式工具类、字体图标、路径导航】

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>

  • bootstrap 【动态效果】需要引入两个js文件 script:src

      1. jquery.js bootstrap的依赖 插件
      1. bootstrap.js

  • 因为Js代码会阻塞css样式的执行，为了等页面标签都渲染完毕，再去加载Js，故把js文档放在页面最底部。

image.png

全局Css样式与组件的区别：

①组件更加复杂，可以点击的选项卡，不再是单个按钮，有功能性的标签

img 属性

object-fit: cover; 当图片在可以缩放情形下，保证图片不被变形，左右两侧多余裁剪

avatar
文章
阅读
粉丝