黑马pink老师移动Web开发-Bootstrap案例

最新推荐文章于 2024-06-10 21:17:33 发布

简单，

最新推荐文章于 2024-06-10 21:17:33 发布

阅读量1.3k

点赞数

文章标签：前端 bootstrap css

本文链接：https://blog.csdn.net/weixin_42523298/article/details/123310536

版权

1:响应式开发原理：

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

平时我们的响应式尺寸划分

1.超小屏幕（手机，小于768px）：布局容器设置宽度为100%

2.小屏幕（平板，大于等于768px）：布局容器设置宽度为750px

3.中等屏幕（桌面显示器，大于等于992px）：布局容器宽度设置为970px

4大屏幕（大桌面显示器，大于等于1200px）：布局容器宽度设置为1170px

注意：@media screen 的含义

利用 @media screen 实现网页布局的自适应,@media screen and
开始研究响应式web设计，CSS3 Media Queries是入门。

其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。

换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。
那么，Media Queries是如何工作的？
两种方式：

一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

在media属性里：
screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种方式，即是直接写在<style>标签里：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
}
}
写法是前面加@media，其它跟link里的media属性相同。

其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
原文链接：https://blog.csdn.net/qq_37968920/article/details/82424009

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        height: 150px;
        background-color: pink;
        margin: 0 auto;
      }
      /* 1.超小屏幕（手机，小于768px）：布局容器设置宽度为100% */
      /* 当屏幕尺寸小于767px时，应用下面的CSS样式 */
      @media screen and (max-width: 767px) {
        .container {
          width: 100%;
        }
      }

      /* 2.小屏幕（平板，大于等于768px）：布局容器设置宽度为750px */
      @media screen and (min-width: 768px) {
        .container {
          width: 750px;
        }
      }

      /* 3.中等屏幕（桌面显示器，大于等于992px）：布局容器宽度设置为970px */
      @media screen and (min-width: 992px) {
        .container {
          width: 970px;
        }
      }

      /* 4大屏幕（大桌面显示器，大于等于1200px）：布局容器宽度设置为1170px */
      @media screen and (min-width: 1200px) {
        .container {
          width: 1170px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 响应式开发里面。首先需要一个布局容器 -->
    <div class="container"></div>
  </body>
</html>

2.响应式导航

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .container {
        height: 750px;
        margin: 0 auto;
      }

      .container ul li {

最低0.47元/天解锁文章

简单，

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
黑马pink老师移动Web开发-Bootstrap案例

1:响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的平时我们的响应式尺寸划分1.超小屏幕（手机，小于768px）：布局容器设置宽度为100%2.小屏幕（平板，大于等于768px）：布局容器设置宽度为750px3.中等屏幕（桌面显示器，大于等于992px）：布局容器宽度设置为970px4大屏幕（大桌面显示器，大于等于1200px）：布局容器宽度设置为1170px注意：@mediascreen 的含义利用 @media ..
复制链接

扫一扫