Bootstrap @Media分类
主要的有:
1.第一个断点群体就是针对于智能手机设置,他的宽度是小于480px(
2.第二个断点是高智能移动设备,比如说Ipads设备,他的宽度是小于768px(
3.第三个断点就是针对于大设备,比如说PC端,他的宽度是大于768px(>768px)
为了完美一些,我们还可以添加另外几种断点:
1.添加一个小于320px的断点,针对于小型的移动设备;(
2.还可以添加适用于平板设备的断点,大于768px小于1024px(>768px 和
3.最后还可以为超宽的桌面设置一个断点,大于1024px(>1024px)
综合下来,设置断点把握三个要点:
1.满足主要的断点;
2.有可能的话添加一些别的断点;
3.设置高于1024px的桌面断点
或者适配iphone和ipad等设备
Bootstrap @Media分类的更多相关文章
- bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~
git地址:https://github.com/zhangjiahao93/jQ.select HTML部分 <!DOCTYPE html> <html> <head ...
- bootStrap @media 用法
一. @media 格式 @media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- Media Queries 媒体查询常见设备断点
按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
- [转载]Understanding the Bootstrap 3 Grid System
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...
- 常见的media断点
landscape mode是指宽度比高度宽的模式,也就是俗称的宽屏模式: portrait mode是指高度比宽度高的模式,也就是俗称的竖屏模式: /*#region SmartPhones */ ...
- Material Design学习
前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...
随机推荐
- AirSim
https://github.com/Microsoft/AirSim 功能 1 虚拟模拟 2半虚拟模拟 安装教程 环境安装 1安装 cmake 直接下 .exe 2安装cuda 3安装Eigen 3 ...
- LabelImg 图像图像标注工具
https://github.com/tzutalin/labelImg windos版本请不要把存放在中文目录下,否则打不开.
- 1115 洛谷luogu最大子段和
题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一个正整数NNN,表示了序列的长度. 第二行包含NNN个绝对值不大于100001000010000的 ...
- 关于npm --save还是-save的横岗数量的细节的记录
最近又开始鼓捣npm了,所以得稍微记录一下. 首先是npm install xxx --save 和 npm install xxx -save这两的区别(注意加粗的部分,横杠数不一样).当我搜索-- ...
- HDU1233(Kruskal&Prim两解)
https://vjudge.net/problem/HDU-1233 还是畅通工程 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以 ...
- 可以设置超时版的的fetch
// 超时版的fetch _fetch(fetch, timeout) { return Promise.race([ fetch, new Promise(function (resolve, re ...
- 学习Angularjs向数据库添加数据
今天学习angularjs向数据库添加数据. 学习此篇,得从以往几篇开始,因为那还有创建数据表等演示. 现在来创建一个添加的存储过程: SET ANSI_NULLS ON GO SET QUOTED_ ...
- LiveCharts文档-1前言
原文:LiveCharts文档-1前言 LiveCharts文档-1前言 最近做一个企业应用,客户端使用的是WPF,需要生成一个漂亮的统计图表,以前WinForm有Chart控件,但是微软貌似没有弄W ...
- 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 ...
- 在 Linux 上搭建IntelliJ IDEA license server服务器
IntelliJIDEALicenseServer_linux_amd64 ,把该文件传到服务器的某个目录,我是放在了/var/local/software目录下 sudo chmod +x ./In ...