집 > 기사 > 웹 프론트엔드 > 반응형 레이아웃 개발 튜토리얼 예시

반응형 레이아웃 개발 튜토리얼 예시

小云云원래의: 2018-01-29 11:22:142234검색

반응형 레이아웃은 다양한 단말기의 사용자에게 보다 편안한 인터페이스와 더 나은 사용자 경험을 제공할 수 있습니다. 현재 대형 화면 모바일 장치가 인기를 누리고 있는 상황에서 이를 "대세"라고 해도 과언이 아닙니다. 점점 더 많은 디자이너들이 이 기술을 채택함에 따라 우리는 많은 혁신을 목격할 뿐만 아니라 일부 확립된 패턴도 목격하고 있습니다.

모바일 웹 서문

모바일 웹: 휴대폰 브라우저 또는 WeChat에서 탐색하는 웹 페이지
모바일 앱: 휴대폰에 다운로드하여 설치해야 하는 애플리케이션

1.

1.1 반응형 개발은 하나의 코드 세트가 여러 터미널에서 실행됩니다. 장점: 빠른 개발, 빠른 유지 관리, 우수한 적응력: 느린 로딩 속도.

1.2 하나의 코드 세트가 하나의 터미널에서 실행됩니다. 장점: 빠른 로딩 속도 단점: 느린 개발, 느린 유지 관리 및 열악한 적응

1.3 적용 시나리오:

반응형 개발은 일부 새로운 웹 사이트에서 사용됩니다(PC와 모바일은 동시에 출시됩니다). 요구사항은 그다지 높지 않습니다
순수 네이티브 모바일 웹 개발은 기존 일부 PC에서 일반적으로 사용됩니다. 모바일 단말에서 출시된 웹사이트를 모바일 단말용으로 다시 개발하는 경우 모바일 단말에서는 빠르게 로딩되는 웹사이트가 필요합니다

2. 반응형 개발 원칙

2.1 CSS3의 미디어 쿼리: 화면 너비를 쿼리하여 특정 너비 범위의 웹 페이지 레이아웃 지정

2.2 일반 장치의 화면 너비

초소형 화면(휴대폰) ) 768px 이하

소형 화면 장치(태블릿) 768px-992px

중형 화면(기존 컴퓨터) 992px~1200px

대형 화면 장치(현대 컴퓨터) 1200px 이상

2.3 미디어 쿼리 구문

    @media screen and (条件){
        //满足条件执行CSS代码
    }

    and的前后必须有空格  条件通常只有两个 min-width max-width

    @media (条件){
        //满足条件执行CSS代码
    }

    可以简写省略 screen and

2.4 미디어 쿼리 작성 순서와 특징

2.4.1 조건부 판단에는 두 가지 종류가 있습니다

min-width 화면 너비가 다음보다 클 때 특정 값과 같을 때 적용됩니다. (최소 너비)
max-width 화면 너비가 특정 값(최대 너비)보다 작거나 같을 때 적용됩니다.

2.4.2 조건부 판단에는 일반적으로 다음 4가지 기준 값이 있습니다

  width > 1200  大屏幕 大屏PC设备
  992 < width < 1200  中屏幕 老式电脑
  768 < width < 992  小屏幕 平板设备
  width < 768 超小屏幕 手机

2.4.3 쿼리 및 판단 순서에 대한 미디어 지침

1. 최소 너비 조건을 사용하는 경우 조건 판단 크기는 작은 것부터 대문자이어야 합니다

  /*min-width: 768px 当屏幕的宽度大于等于768时 背景颜色为green */
  @media screen and (min-width: 768px){
      body{
          background-color: green;
      }
  }

  /*min-width: 992px 当屏幕的宽度大于等于992时 背景颜色为blue*/
  @media screen and (min-width: 992px){
      body{
          background-color: blue;
      }
  }

  /*min-width: 1200px 当宽度大于等于1200时 背景颜色为pink*/
  @media screen and (min-width: 1200px){
      body{
          background-color: pink;
      }
  }

2. 판정을 하려면 조건 판정의 크기가 큰 것부터 소문자여야 합니다

  /*max-width: 1200px:宽度在1200以下*/
  @media screen and (max-width: 1200px) {
      body {
          background-color: green;
      }
  }

  /*max-width: 992px:宽度在992以下*/
  @media screen and (max-width: 992px) {
      body {
          background-color: blue;
      }
  }

  /*max-width: 768px:宽度在768以下*/
  @media screen and (max-width: 768px) {
      body {
          background-color: pink;
      }
  }

2.3.4 작성 방법에는 두 가지 특징이 있습니다

상위 호환성은 작은 판정만 쓰고, 큰 판정은 쓰지 않지만 적용됩니다. 큰 화면에서
하향 취재는 작은 판단과 큰 판단을 써서 큰 조건을 충족시키면 큰 조건의 스타일이 적용됩니다. 뒤에 적힌 큰 조건이 작은 조건의 스타일을 덮어쓰게 됩니다

2.3.5 미디어 쿼리를 사용하여 웹 페이지 레이아웃 구현

큰 화면에서 다음은 4열, 중간 화면은 3열, 작은 화면은 2열, 초소형 화면은 1열을 표시합니다

  /*w 768~992  每一行放置两个子元素  50%*/
  @media screen and (min-width: 768px){
      .box > p{
          width: 50%;
      }
  }
  /* w 992~1200 每一行放置三个子元素  33.33%*/
  @media screen and (min-width: 992px){
      .box > p{
          width: 33.33%;
      }
  }
  /*w >1200 每一行放置四个子元素 25%*/
  @media screen and (min-width: 1200px){
      .box > p{
          width: 25%;
      }
  }

미디어 쿼리 판단 조건을 통해 상자의 너비를 변경하는 것이 원칙입니다

3. 반응형 개발 프레임워크 소개 Bootstrap

특징: 유연한 도입, 우아한 코드, 아름다운
장점: Bootstrap은 우리의 웹 개발은 더 간단하고 빠릅니다
버전: 현재 시장에서 가장 많이 사용되는 버전은 3.x.x 버전입니다. 또한 IE8에 대한 2.3.2 지원도 있으며 이제 4.0.0의 공식 버전을 사용할 수 있습니다
관련 링크: 중국 공식 웹사이트 Bootstrap

4. 라이브러리와 프레임워크의 차이점

jquery: 라이브러리는 편리한 DOM입니다(원하는 방법은 무엇이든 호출하세요)(리더는 바로 당신입니다. 그리고 당신은 라이브러리를 호출합니다)
부트스트랩: 프레임워크 인터페이스 도구 세트는 당신을 제어하는 프레임워크입니다(프레임워크는 일련의 규칙을 공식화했고 사용자는 규칙을 따릅니다) 쓰기)는 전체 웹사이트의 대부분의 기능을 실현할 수 있습니다
플러그인: fullpage는 비교적 간단한 기능을 가지고 있으며 웹페이지에서 하나 또는 여러 기능만 구현합니다

5. Bootstrap 기본 사용법

5.1 다운로드: Bootstrap 공식 웹사이트로 이동 제작 환경용 중국어 다운로드 Bootstrap 압축을 푼 후 전체 폴더를 프로젝트에 넣으세요. Bootstrap CDN

5.2를 사용하여 Bootstrap

먼저 Bootstrap CSS를 소개할 수도 있습니다. (테마를 원하시면 테마가 포함된 CSS를 소개하시면 됩니다.) ) )
그런 다음 자신만의 CSS를 소개하세요
먼저 jquery를 소개하세요(Bootstrap은 jquery에 의존하기 때문입니다)
그런 다음 Bootstrap의 JS를 소개하세요
그런 다음 자신만의 JS를 소개하세요

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- html5 shiv是为了让低版本IE支持html5新标签  -->
    <!-- respond.js是为了让低版本IE支持CSS3媒体查询 -->
    <!-- 但是注意respond.js需要在服务器下运行 就是localhost 不能再file下运行不然无法工作 -->
    <!-- 条件注释 IE版本小于IE9 条件成立就执行下面的代码  如果条件不成立就是注释不执行 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
    <!-- bootstrap的JS插件依赖jquery 所以要先引入jquery -->
    <script src="lib/jquery/jquery.min.js"></script>
    <!-- 在引入Bootstrap的JS文件 -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

5 .3 패키지 소개 순서

는 먼저 타사 프레임워크
를 소개한 다음 자신의 파일
CSS을 소개하고 헤드에 넣는 것입니다(페이지 렌더링에 유용한 일부 특수 JS 파일). 헤드에 넣어야 함)
body end tag에 배치된 js는 위에 소개되어 있습니다

5.4 Viewport

Viewport: 브라우저 창의 변경으로 인해 PC에서 보는 브라우저의 시각적 창이 변경됩니다
뷰포트는 PC 쪽은 시각적 창(변경됨)이고 모바일 쪽은 고정된 값을 가지며 일반적으로 기본값은 980입니다
但是默认移动端的时候980会造成网页的缩放或者出滚动条
解决移动端默认视口会造成网页缩放和滚动条设置meta标签设置默认是视口的宽度等于设备的宽度
视口的其他属性初始化缩放 initial-scale=1.0 是否允许用户缩放 user-scalable=no 最大 maximum-scale=1.0 和最小缩放 minimum-scale=1.0
meta:vp+tab 凡是写移动端页面一来就是加上视口

5.5 浏览器兼容模式

http-equiv="X-UA-Compatible" 表示设置IE浏览器的兼容模式
content="IE=edge" 表示让IE浏览器用最新的渲染引擎渲染页面

6. Bootstrap文档

6.1 基础CSS样式

概要 (常用)

布局容器

栅格系统 (常用)

xs : 超小屏幕手机 (<768px)
sm : 小屏幕平板 (≥768px)
md : 中等屏幕桌面显示器 (≥992px)
lg : 大屏幕大桌面显示器 (≥1200px)

预置排版样式

统一预制标签样式
文本对齐 (常用)
改变大小写

代码样式

页面输出代码

表格样式

各种表格样式

表单样式

各种表单组合的样式

按钮样式

各种按钮颜色和按钮大小等样式 (常用)

图片样式

图片圆角的样式

辅助工具类

内容块居中 (常用)
快速浮动和清除浮动 (常用)
显示隐藏 (常用)

响应式工具类 (常用)

hidden-xx : 在某种屏幕下隐藏
visible-xx : 在某种屏幕尺寸下显示

基础CSS这块只是将我们常用想一些元素的样式做了美化,如果需要使用直接拿过来用就行了

6.2 预制界面组件

导航 (常用)
导航条 (常用)
面包屑导航
下拉菜单 (常用)
按钮式下拉菜单
按钮组
输入框组
警告框
页头
分页
列表组 (常用)
面板 (常用)
媒体对象 (常用)
进度条
Glyphicons字体图标 (常用)
标签
徽章
缩略图
大屏幕
嵌入内容
内嵌
将我们日常使用的一些功能块例如下拉菜单,提前写好,我们使用时直接找到对应的demo然后拿回来做相应调整就行了

6.3 Javascript 插件

模态对话框 (常用)
下拉菜单 (常用)
滚动监听 (常用)
标签页 (常用)
工具提示
弹出框
警告框
按钮
折叠面板 (常用)
轮播图 (常用)
吸顶效果 (常用)

data-spy="affix"
data-offset-top="什么位置出现"
data-offset-bottom="什么位置消失"

6.4 Javascript插件依赖情况

jQuery

Bootstrap 框架中的所有JS组件都依赖jquery实现

7. 项目搭建

7.1 搭建Bootstrap页面骨架及项目目录结构

├─ /project/ ··················· 项目所在目录
└─┬─ /css/ ······················· 自己的CSS文件
  ├─ /font/ ······················ 使用到的字体文件
  ├─ /img/ ······················· 使用到的图片文件
  ├─ /js/ ························ 自己写的JS脚步
  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
  ├─ /favicon.ico ················ 站点图标
  └─ /index.html ················· 入口文件

7.1.1 约定编码规范

1. HTML约定

在head中引入必要的CSS文件,优先引入第三方的CSS,方便我们自己的样式覆盖
在body末尾引入必要的JS文件,优先引入第三方的JS文件,注意JS文件之间的依赖关系

比如Bootstrap.js 依赖jquery,那就应该先引入jquery.js 然后引用Bootstrap.js

2. CSS约定

除了公共级别的样式,其余样式全部由模块前缀
尽量使用直接子代选择器少用间接子代选择器避免误杀

7.2 创建主页引入相应的文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/bootstrap/bootstrap.js"></script>
  <script src="index.js"></script>
</body>
</html>

7.3 在我们默认样式表中讲默认字体设置为

body{
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

7.4 完成页面空结构

先划分好页面的大容器,然后具体看每一个容器的单独情况

  <!--  头部区域 -->
  <header></header>
  <!-- /头部区域 -->
  <!--  广告轮播 -->
  <section></section>
  <!-- /广告轮播 -->
  <!--  立即预约 -->
  <section></section>
  <!-- /立即预约 -->
  <!--  产品介绍 -->
  <section></section>
  <!-- /产品介绍 -->
  <!--  新闻资讯 -->
  <section></section>
  <!-- /新闻资讯 -->
  <!--  合作伙伴 -->
  <section></section>
  <!-- /合作伙伴 -->
  <!-- 脚注区域 -->
  <footer></footer>
  <!-- /脚注区域 -->