移动web第七天-----响应式,媒体查询

一、媒体查询

Snipaste_2022-04-11_22-16-13.png
1.媒体特性常用写法

1.max-width
2.min-width

2.区分设备类型
Snipaste_2022-04-11_22-18-43.png
3.媒体特性

数值:width,height,max-width,max-height,min-width,min-height
屏幕方向:orientation(属性):portrait(竖屏)、landscape(横屏)


Snipaste_2022-04-11_22-24-13.png

二、BootStrap

中文官网: https://www.bootcss.com/

bootstrap使用步骤

1.引入:bootstrap提供的css代码

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

2.调用类:使用bootstrap提供的样式
.container是BootStrap中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
.container-fluid也是BootStrap中专门提供的类名,所有应用该类名的盒子,宽度均为100%。
分别使用.row类名和.col类名定义栅格布局的行和列。
注意: 1. container类自带间距15px;

  1. row类自带间距-15px

BootStrap栅格系统

栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份


Snipaste_2022-04-11_23-15-43.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 媒体查询与响应式布局 第一章 序论 现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规...
    whitsats阅读 4,904评论 0 10
  • 1.媒体查询 目的:能够根据设备宽度的变化,设置差异化样式开发常用写法 完整写法(几乎不用) 其中媒体特性最常用的...
    骑着蜗牛去攻城阅读 465评论 0 0
  • 1.移动端布局 1.1 移动端基础 移动端现状 移动端浏览器我们主要对webkit内核进行兼容; 我们现在开发的移...
    你好好想想_be60阅读 676评论 0 5
  • 响应式 一、媒体查询 开发常用写法媒体特性常用写法 max-width min-width 1 书写顺序 目标:能...
    七月流雪阅读 174评论 0 1
  • 一、移动端web开发 1.1、响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同...
    honest涛阅读 229评论 0 1