使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端

Posted 2023-05-10

可以用media query媒体查询来设置不同分辨率下的不同css样式

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) ...

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) ...

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) ...

给你来一段样例，你看看

@media(min-width: 768px) 
 .ipad
 
    display: none;
 
 .mobile
 
   display: none;
 
 .pc
 
   display: block;
 
 .row 
   margin-left: 0;
   margin-right: 0;
 
 .home-bg 
   //margin: 0;
   background: url(asset-path("common/home_big3.jpg")) center no-repeat;
   width: 100%;
   height: 500px;
   background-size: cover;
 

@media (max-width: 767px) 


  .ipad
  
    display: block;
  
  .mobile
  
    display: none;
  
  .pc
  
    display: none;
  

  .home-bg 
    background: url(asset_path("common/home_1024.jpg"));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    //height: 100%;
  
 

@media(max-width: 480px) 
  .ipad
  
    display: none;
  
  .pc
  
    display:none;
  
  .mobile
  
    display: block;
  
  .home-bg 
    background: url(asset_path("common/home_640.jpg"));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
  
 

想必你能理解我的意思

参考技术A

参考技术B 有点难度。。

响应式设计之Bootstrap浅谈

响应式设计是目前比较流行的web应用技术，bootstrap也采用了这项技术，在不同的组件中广泛应用。本文讲详细额介绍响应式设计和实现的原理和基本用法。

一、认识响应式设计

       响应式设计可以使网页适应不同的设备，比如智能手机，平板电脑，tv、pc显示器、苹果手机、安卓手机，包括横向、纵向的屏幕。开发人员只需要正确的实现响应式web设计，网站就可以更好的适合兼容各种设备。

二、目前响应式web设计的实现途径包括：弹性网络布局，液态布局，弹性图片显示、使用Css Media Query技术等。基本的设计思想如下：

       1、保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸。

       2、增强可读性以及易用性，帮助用户在任何设备环境中都能更容易的获取最重要的信息。

三、响应式设计流程

       1、确定需要兼容的设备类型、屏幕尺寸。（移动设备与pc端对于移动设计与实现注意增加手势功能）

        屏幕尺寸：包括各种手机屏幕的尺寸（横向与纵向）、各种平板电脑的尺寸（横向与竖向）、计算机屏幕的尺寸。

      2、制作线框原型。针对确定需要适应的几个尺寸，分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面布局如何变化，内容尺寸如何缩放，功能、内容如何删减，针对特殊的环境做特殊化的设计。这个过程就需要设计师与开发人员保持密切的沟通。

    3、测试线框原型，将项目导入到相应的设备进行一些简单的测试，尽早的发现可访问性以及可读性的存在的问题并解决。

    4、视觉设计。由于移动设备的屏幕分辨率与传统计算机的屏幕不一样，在设计时需要保证内容的可读性、控件可点击区域的面积等。

    5、脚本实现，与传统web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终产出可能与设计原稿出入比较大，需要开发人员与设计师多沟通。

在响应式设计思路中，一个重要的因素就是如何处理图片大小的问题。下篇文章将继续讲解响应式图片的设计方式以及思想。