手机的屏幕比较小,宽度通常在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. sonar6.7.6安装及汉化

    sonar下载地址 https://www.sonarqube.org/downloads/ 下载请选择 然后解压 在目录F:\tools\sonarqube-6.7.6\bin\windows-x8 ...

  2. linux中断源码分析 - 概述(一)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 关于中断和异常 一般在书中都会把中断和异常一起说明,因为它们具有相同的特点,同时也有不同的地方.在CPU里,中断 ...

  3. 如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务

    如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务? 我这里的测试环境是ArcGISServer10.1和TerraExplorer Pro7.0,主要过程截图如下,

  4. IntelliJ IDEA常用设置(一)

    一.java文件中代码有错误,不点开java文件就不提示错误解决方法,版本不同可能界面有所区别. -->File->Settings->Build,Execution,Deploym ...

  5. 5个python爬虫教材,让小白也有爬虫可写,含视频教程!

    认识爬虫   网络爬虫,如果互联网是一张蜘蛛网,网络爬虫既是一个在此网上爬行的蜘蛛,爬了多少路程即获取到多少数据. python写爬虫的优势   其实以上功能很多语言和工具都能做,但是用python爬 ...

  6. C#winform中调用wpf

    原文:C#winform中调用wpf 在WinForm中是可以使用WPF中的控件(或者由WPF创建的自定义控件) 1.新建一个winform项目: 2.在解决方案上新建一个wpf项目: 如图: 如果有 ...

  7. linux配置iptables(3)

    简单通用 web 服务器iptables 配置 *filter :INPUT DROP [0:0]:FORWARD DROP [0:0]:OUTPUT ACCEPT [0:0] #超出 链规则 的数据 ...

  8. bitset常用用法&&简单题分析

    Preface bitset,还是一个比较好用的STL,可以给一些题目做到神奇的常数优化(\(O(\frac{原来的复杂度}{机器的位数(32位or64位)})\)) 关于一些具体的函数等内容可以参考 ...

  9. 【UFUN开发板评测】小巧而不失精致,简单而不失内涵——uFun开发板开箱爆照

    关于uFun学习板--"满满的爱和正能量" uFun是由@张进东 张工组织发起的一个开源的学习板,设计初衷是为了帮助学生更好的理解电子知识和开发技巧,同时又能对学生毕业找工作有很明 ...

  10. html绝对路径,相对路径

    .com/eat.php中引用.com/includes/headrt.php的话写includes/header.php .com/service/eat.php中引用.com/includes/h ...