在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏
相当于C#UI里面的容器系统，bootstrap对css进行扩展，使用了类似less文件中的变量定义，sacc不仅增加了变量还多了继承、混合、嵌套等功能
安装react-bootstrap（react-bootstrap标签自定义，属性和bootstrap相同）
随着Web应用变的越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，比如轮播图、分页、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。
在进行网也开发尤其是移动端页面开发，让程序员头疼的问题就是设备兼容性和自适应的，下面我来说一下我在工作中的一些方法。
作为一名优秀的web前端人员，不懂响应式布局怎么可以呢？ 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。 我们都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。 所以，我们设计的网页不能在按照1024的标准来设计或者是前端重构了。 再加上现在移动互联网的趋势发展这么良好，错过移动互联网这个平台是我们的最大损失。 因为国内众多电商网站还是门户网站，移动端的流量要大于pc端的。 响应式的核心优势在于设计者
开门见山，本文介绍响应式的瀑布流的实现方法。 最终效果图如下，改变浏览器大小效果更棒哦~ 以下我们将每个瀑布流盒子简称为box 使用数组记录每个box宽和高 ---- 设置不同屏幕宽度下每一行box的数量 使用$(window).width()获取屏幕宽度 根据不同屏幕宽度设置每一行box的数量 得到每个box的宽度 这里使用最傻的方法计算，有待优化 1 2 3 4 5 6var num = 4; //每行box数量 if ($(window).width() <= 500) num = 1; if
如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小：
在这一章，我们将讨论Bootstrap一个最重要的功能：网格系统。我们将学会网格系统如何工作；我们如何在应用中使用网格系统；我们也将创建简单的网页布局去更好的理解它。
这里我用的编译软件是HBuilder X，只用到了一张雪花图片snow.png,中间两个不用管,是我上课的其他内容,雪花图片我放在这里了。
jquery获取尺寸的方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
手机屏幕的分辨率越来越高，比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图，其参考分辨率为1440*2560 px。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，使用这个框架可以简单高效的开发出适配各种屏幕的网站应用，即是编写一套代码，适用多重平台（PC，平板，手机等）。Bootstrap 相比其他框架，自由度更高，它提供了基本的样式和基本的组件，而不会在创造上约束开发者的思维。
微信小程序中需要用到许多代码，且毫无规律而言，对于刚接触微信小程序开发的开发者来说，想要完全记住并流畅的使用必定是难上加难的，那么有没有什么方法能够有效地解决这个问题呢？
近期某个项目中需要实现以下需求： 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致，则以图片中心为基点等比缩放背景图片，以适应屏幕尺寸。 以上需求的原则就是始终保持背景图片宽高比，居中等比缩放填满屏幕。 我们知道background-size: cover;是在背景图片保持原始比例的基础上，等比缩放覆盖背景区域。但是缩放的基点是左上角(0,0)，并不是居中缩放的。这样的机制下，屏幕显示的始终是背景图片的左上部分，并不能满足项目的需求。 后来无意中注意到必应首页的背景图片是居中平铺的，行为表现与
随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通
杨小杰带来网站搭建技术教程相关页面' style='color:red;'>技术教程，现在为大家分享一篇关于如何做一张属于自己的自适应网页的文章，相信看完这篇文章后，你就能给自己来一个漂亮的自适应了！
Bootstrap使用一系列响应式断点来定义不同屏幕尺寸的布局变化。开发者可以利用这些断点在不同的设备上进行布局调整。
---- 如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！ PX px：绝对单位，页面按精确像素展示。 ---- 在PC端经常使用的单位，不用计算，直接使用，一般情况不用考虑设计图纸的来改变页面的大小。就直接采用px,方便快捷但是不能自适应。 RPX rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。 ---- 微信的自适应单位，同时微信规定：屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物
百度最近的算法调整非常的频繁，特别是针对移动端的冰桶算法4.0的强势登场感觉影响更大，因为冰桶算法4.0主要是针对移动端广告位置、尺寸的，基本上可以理解为是打击移动端广告泛滥的，所有尺寸过大的以及对内容有遮挡的都会被降权，具体的大家可以看看图1、图2两张百度官方认为是标准正确的移动端广告范例来对比了解一下就明白了。
在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。
Android开发过程中我们常用的尺寸单位有px、dp，还有一种sp一般是用于字体的大小。但是由于px是像素单位，比如我们通常说的手机分辨例如1920*1080都是px的单位。现在Android屏幕分辨率碎片化720x1280、1080x1920、2280x1080，这就造成例如187px会在各个分辨率的机型上都是显示一样大小的，那肯定不是我们想要的效果，所以用px单位我们是难以达到适配效果的，那么为什么用dp可以呢？
小程序是微信主推的产品，现在也有不少公司的产品已经开发了小程序版本。那么，开发小程序你需要了解哪些知识？ 1、使用微信web开发者工具 此工具是微信官方提供的小程序开发工具，感觉不是很完善，很多设置没办法定制，对于用习惯了sublime, idea, pyCharm等工具的同学来说，有那么一些不爽~ 2、只允许操作JS对象 对习惯了jQuery的同学来说，要改变一下思维了。小程序里面所有的API都是操作JS对象的，没有获取、插入、删除DOM这个说法。比如，要显示和隐藏某标签，应该这样实现： <view cl
同一套页面可以兼容不同分辨率的设备，Bootstrap的响应式布局依赖于栅格系统实现，将一行分为12各格子，通过指定控件在不同分辨率设备上所占各自的数目实现兼容
劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非wifi情况下即使加了延时加载也易出现加载慢的情况。
rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。
.版本 2 .支持库 spec .子程序 Ashin_ .局部变量 hdc, 整数型 .局部变量 图形, GP图形 .局部变量 画刷, GP纯色画刷 .局部变量 字体, GP字体 .局部变量 画笔, GP画笔 .局部变量 矩形, 矩形F hdc ＝ GetDC (窗口_取句柄 (, , “Valve001”, “No More Room in Hell”)) 调试输出 (hdc) 图形.创建自DC (hdc) 画刷.创建 (RGB到ARGB (#绿色, )) 矩形 ＝ 制矩形F (10, 10,
rem:参考的是根元素（html）字体大小 （统一的，一个页面只有一个html）
因移动设备的多样性，特别是 Android 的碎片化严重，存在各种各样的分辨率，而 Flutter 跨平台开发又需同时支持 Android 和 iOS ，为尽可能的还原设计图效果提升用户体验，屏幕适配就势在必行了。
各种设备种类和尺寸那么多，基于一种原型设计好的界面，换到另一种设备上去若不适配全乱套了。好在还是有很多方案的，这减少了不少的开发工作量。最流行的就是头条的方案了，使用也超级简单。然而，如果不想引入，还可以简单的一个工具类实现，原理类似于头条的方案。
px ：是屏幕的像素点 in ：英寸 mm ：毫米 pt ：磅，1/72 英寸 dp ：一个基于density的抽象单位，如果一个160dpi的屏幕，1dp=1px dip ：等同于dp sp ：同dp相似，但还会根据用户的字体大小偏好来缩放。 建议使用sp作为文本的单位，其它用dip
删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vue
由于小程序的使用是在不同机型的手机上进行的，所以这个时候就不能使用固定大下的px单位，而是要使用具有响应式的rpx单位了。
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。与 CSS 相⽐，WXSS 扩展的特性有：
参考： http://www.w3cschool.cc/js/js-window.html
由于歌曲名称可能超过屏幕宽度而显示不下，所以当歌曲名称长度大于屏幕宽度的时候滚动显示。
早就想研究一下屏幕适配这块了，主要开始我自己做的那个APP都是基于PDA的，所以不需要适配别的机形，而原本自己的那个PDA的屏幕比例也是比较特别，用他的效果在手机或是Android虚拟机上效果都不好看，差别好大，于是就想研究一下关于Android屏幕适配的框架，原来找到一个AndroidAutoLayout的框架，结果后来发现这个已经N年没再更新了，无意间发现了今日头条屏幕适配方案终极版，用了一下，真是简单又好用。
后面，打算讲在之前沉淀的一些前端知识体系相关的文章陆陆续续整理一下，在html和css中，有一些不是常常被提及，但是又非常有用的一些知识，这里面非常值得一说要数语义化标签和布局断点了。
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
前言：这个问题出现在我做平板项目的时候，需要横排显示一张图片以及其他控件，如下图：
具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
