手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768)设置相应的min-width和max-width值
所以响应式设计一般对600px下,1000px上针对各版本做@media细化。

主要的有:

1.第一个断点群体就是针对于智能手机设置,他的宽度是小于480px(

2.第二个断点是高智能移动设备,比如说Ipads设备,他的宽度是小于768px(

3.第三个断点就是针对于大设备,比如说PC端,他的宽度是大于768px(>768px)

为了完美一些,我们还可以添加另外几种断点:

1.添加一个小于320px的断点,针对于小型的移动设备;(

2.还可以添加适用于平板设备的断点,大于768px小于1024px(>768px 和

3.最后还可以为超宽的桌面设置一个断点,大于1024px(>1024px)

综合下来,设置断点把握三个要点:

1.满足主要的断点;

2.有可能的话添加一些别的断点;

3.设置高于1024px的桌面断点

PC端一般常用尺寸:
@media screen and (max-width: 2059px) {
    ol.dribbbles {
        max-width: 1750px
    }
}
 
@media screen and (max-width: 1809px) {
    ol.dribbbles {
        max-width: 1500px
    }
}
 
@media screen and (max-width: 1559px) {
    ol.dribbbles {
        max-width: 1250px
    }
}
 
@media screen and (max-width: 1309px) {
    ol.dribbbles {
        max-width: 1000px
    }
}
 
@media screen and (max-width: 1059px) {
    ol.dribbbles {
        max-width: 750px
    }
}
 
@media screen and (max-width: 809px) {
    ol.dribbbles {
        max-width: 500px
    }
}
 
@media only screen and (max-width: 870px) {
 
}
@media screen and (max-width: 520px){
 
}
 
 
/*各种手机的@media媒介*/
 
@media screen and (max-height:475px){
 
}
/*此参数为iphone4的高度限制*/
@media screen and (max-height:480px) and (max-width:320px){
 
}
/*此参数为iphone4-iphone5的高度限制*/
@media screen and (min-height: 481px) and (max-height: 568px){
 
}
/*此参数为iphone5-iphone6的高度限制*/
@media screen and (min-height:480px) and (max-height: 667px){
 
}
/*联想的尺寸*/
@media screen and (min-height:668px) and (max-height: 735px){
 
}
/*此参数为iphone6 plus的高度*/
@media screen and (min-height: 736px) {
 
}
/*此参数为红米Note判断*/
@media screen and (min-height:737px){
 
}
 
 

或者适配iphone和ipad等设备

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

Bootstrap @Media分类的更多相关文章

  1. bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~

    git地址:https://github.com/zhangjiahao93/jQ.select HTML部分 <!DOCTYPE html> <html> <head ...

  2. bootStrap @media 用法

    一. @media 格式 @media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) ...

  3. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  4. <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫

    并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...

  5. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  6. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  7. [转载]Understanding the Bootstrap 3 Grid System

    https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...

  8. 常见的media断点

    landscape mode是指宽度比高度宽的模式,也就是俗称的宽屏模式: portrait mode是指高度比宽度高的模式,也就是俗称的竖屏模式: /*#region SmartPhones */ ...

  9. Material Design学习

    前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...

随机推荐

  1. AirSim

    https://github.com/Microsoft/AirSim 功能 1 虚拟模拟 2半虚拟模拟 安装教程 环境安装 1安装 cmake 直接下 .exe 2安装cuda 3安装Eigen 3 ...

  2. LabelImg 图像图像标注工具

    https://github.com/tzutalin/labelImg windos版本请不要把存放在中文目录下,否则打不开.

  3. 1115 洛谷luogu最大子段和

    题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一个正整数NNN,表示了序列的长度. 第二行包含NNN个绝对值不大于100001000010000的 ...

  4. 关于npm --save还是-save的横岗数量的细节的记录

    最近又开始鼓捣npm了,所以得稍微记录一下. 首先是npm install xxx --save 和 npm install xxx -save这两的区别(注意加粗的部分,横杠数不一样).当我搜索-- ...

  5. HDU1233(Kruskal&Prim两解)

    https://vjudge.net/problem/HDU-1233 还是畅通工程 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以 ...

  6. 可以设置超时版的的fetch

    // 超时版的fetch _fetch(fetch, timeout) { return Promise.race([ fetch, new Promise(function (resolve, re ...

  7. 学习Angularjs向数据库添加数据

    今天学习angularjs向数据库添加数据. 学习此篇,得从以往几篇开始,因为那还有创建数据表等演示. 现在来创建一个添加的存储过程: SET ANSI_NULLS ON GO SET QUOTED_ ...

  8. LiveCharts文档-1前言

    原文:LiveCharts文档-1前言 LiveCharts文档-1前言 最近做一个企业应用,客户端使用的是WPF,需要生成一个漂亮的统计图表,以前WinForm有Chart控件,但是微软貌似没有弄W ...

  9. Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package

    1.在搭建SpringBoot框架时碰到的问题. ** WARNING ** : Your ApplicationContext is unlikely to start due to a @Comp ...

  10. 在 Linux 上搭建IntelliJ IDEA license server服务器

    IntelliJIDEALicenseServer_linux_amd64 ,把该文件传到服务器的某个目录,我是放在了/var/local/software目录下 sudo chmod +x ./In ...