ホームページ > 記事 > ウェブフロントエンド > レスポンシブレイアウト開発チュートリアルの例

レスポンシブレイアウト開発チュートリアルの例

小云云オリジナル: 2018-01-29 11:22:142326ブラウズ

レスポンシブレイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザーエクスペリエンスを提供することができ、大画面モバイルデバイスの人気が高まっている現在、これは「一般的なトレンド」と言っても過言ではありません。このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、確立されたパターンもいくつか見られます。

モバイル Web の概要

モバイル Web: 携帯電話のブラウザーまたは WeChat で閲覧される Web ページ
モバイル APP: 携帯電話にダウンロードしてインストールする必要があるアプリケーション

1. モバイル Web の概要

1.1 レスポンシブ開発、1 つのコードセットが複数の端末で実行されます。利点: 迅速な開発、迅速なメンテナンス、優れた適応性

1.2 1 つのコードセットが 1 つの端末で実行されます。利点: 読み込み速度が速い。欠点: 開発が遅く、メンテナンスが遅く、適応性が低い。

一部の新しい Web サイトではレスポンシブ開発が使用されている (PC とモバイルが同時にリリースされる)。要件はそれほど高くありません

純粋なネイティブモバイルWeb開発は、一般的に一部の既存のPCで使用されます。モバイル端末上で起動されたWebサイトは、モバイル端末用に再度開発されます。モバイル端末には、高速に読み込まれるWebサイトが必要です
。
2. レスポンシブ開発の原則

2.1 CSS3のメディアクエリ: 画面の幅をクエリすることで、特定の幅の範囲のWebページレイアウトを指定します

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 条件判定には2種類ある

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 条件を判定に使用する場合、条件の判定サイズは小文字から大文字にする必要があります

  /*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 条件を使用する場合。判定の場合、条件判定のサイズは大文字から小文字にする必要があります

  /*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つあります

上位互換では小判定のみ書き込み、大判定は記述されませんが、それも有効になります大きな画面で

下向きにも小さな条件と大きな条件を書き、大きな条件を満たすと大きな条件のスタイルが反映され、後ろに書かれた大きな条件が小さな条件のスタイルを上書きします
。
2.3.5 メディアクエリを使用して大画面に Web ページレイアウトを実装する

以下は 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 Web 開発がよりシンプルかつ高速になります
バージョン: 現在、市場で最もよく使用されているバージョンは 3.x.x バージョンです。さらに、IE8 の 2.3.2 サポートもあり、正式バージョン 4.0.0 が利用可能になりました
関連リンク：中国公式サイト Bootstrapで構築したWebサイト
4.ライブラリとフレームワークの違い

ブートストラップ: フレームワークインターフェースツールセットはあなたを制御するフレームワークです(フレームワークは一連のルールを策定しており、ユーザーはそのルールに従います) 書き込み) ウェブサイト全体のほとんどの機能を実現できます
プラグイン: fullpage は比較的単純な機能を持ち、Web ページに 1 つまたは複数の機能のみを実装します
5. Bootstrap の基本的な使用方法

次に独自の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 ファイルは、 head)
body終了タグに配置したjsは上で紹介しています
5.4 ビューポート

ビューポート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>
  <!-- /脚注区域 -->

レスポンシブ レイアウト開発チュートリアルの例