在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏
安装react-bootstrap（react-bootstrap标签自定义，属性和bootstrap相同）
相当于C#UI里面的容器系统，bootstrap对css进行扩展，使用了类似less文件中的变量定义，sacc不仅增加了变量还多了继承、混合、嵌套等功能
UEditor 百度富文本编辑器的 initialFrameWidth 属性默认值是1000，设置 initialFrameWidth=null 时，编辑器会在第一次加载的时候获取屏幕宽度，然后赋值给 initialFrameWidth 属性，这样确实可以在第一次加载时适应屏幕宽度，但是似乎宽度稍微过了一点点。而且当你改变浏览器大小时，会有很严重的排版BUG，由于它不会自适应宽度。
具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。
随着9月25日iPhone6s的发货，早已预订的人是不是心里开始有点小激动了。那么它的到来对于前端来说有哪些新东西？ Force Touch 针对此次的3D Touch 页面中多了三个事件，当然了，以下事件请自带webkit前缀 1. mouseforcewillbegin 2. mouseforcedown 3. mousefoeceup Javascript代码 看字面意思就能理解了，用法和其他事件一样，只是奇怪为何不起名为forcetouchdown,forcetouchup back
CSS中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。
微信小程序中需要用到许多代码，且毫无规律而言，对于刚接触微信小程序开发的开发者来说，想要完全记住并流畅的使用必定是难上加难的，那么有没有什么方法能够有效地解决这个问题呢？
随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通
rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。
我们在开发中，显示信息详情时，一般后台会给出html文本，在android端一般采用webview控件来展示，但是后台给出的html文本一般是给电脑端用的，没有自适配手机，导致手机端图片显示过大，需要左右移动来查看全图。下面给出几种实用方法，达到在手机端用webview展示html中的图片，能自适应手机屏幕展示。
杨小杰带来网站搭建技术教程相关页面' style='color:red;'>技术教程，现在为大家分享一篇关于如何做一张属于自己的自适应网页的文章，相信看完这篇文章后，你就能给自己来一个漂亮的自适应了！
作者：big（谢刚），腾讯TGideas团队前端工程师，前端虐我千万遍，我待前端如初恋！ 随着9月25日iPhone6s的发货，早已预订入手的小伙伴已开始了新一轮的研究。那么它的到来对于前端来说有哪些新东西？ Force Touch 针对此次的3D Touch 页面中多了三个事件，当然了，以下事件请自带webkit前缀 1. mouseforcewillbegin 2. mouseforcedown 3. mousefoeceup Javascript代码 看字面意思就能理解了，用法和其他事件一样，只是
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
百度最近的算法调整非常的频繁，特别是针对移动端的冰桶算法4.0的强势登场感觉影响更大，因为冰桶算法4.0主要是针对移动端广告位置、尺寸的，基本上可以理解为是打击移动端广告泛滥的，所有尺寸过大的以及对内容有遮挡的都会被降权，具体的大家可以看看图1、图2两张百度官方认为是标准正确的移动端广告范例来对比了解一下就明白了。
我已经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package/react-masonry-component2，可以直接在 React 项目中安装使用。
rem:参考的是根元素（html）字体大小 （统一的，一个页面只有一个html）
随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。
文/小魔女 本文简介 前端开发系列的第二篇文章 基础知识就像是一把宝剑，能让你驰骋在前端领域的战场 知识亦有温度，让我们对新知识永远保持热度吧 分享小魔女的音乐 html渲染、css解析 在面试中，这部分基础知识，非常常见。 将以最简洁的文字，让读者掌握。 浏览器从开始解析HTML到渲染结束都经历了什么？ 解析HTML文件，创建DOM树 解析CSS，形成CSS对象模型 将CSS与DOM合并，构建渲染树（rendering tree） 布局和绘制 浏览器解析CSS是从左开始还是从右？为什么？
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
前言 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。 特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta: 简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种
随着Web应用变的越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，比如轮播图、分页、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
手机屏幕的分辨率越来越高，比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图，其参考分辨率为1440*2560 px。
《微信小程序七日谈》系列文章： 本系列的文章并非初学教程，而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天：人生若只如初见简单记录了笔者初步上手开发微信小程序遇到的一些问题，其中提到了wxss的部分细节问题。这篇文章以笔者在开发小程序响应式UI当中遇到的一些问题为例，简单记录一下使用wxss为响应式开发带来的一些模式和思维上的改变。 rem的重定义 前端工程师对rem非常熟悉，rem是以html元素的font-size为基准的尺寸计量单位。rem方便了开发者对响应式UI的尺寸进行统筹管
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示，图片自适应两种常见情况解决方案。开始吧
viewport是网页默认的宽度和高度， 上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width）， 原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
在进行网也开发尤其是移动端页面开发，让程序员头疼的问题就是设备兼容性和自适应的，下面我来说一下我在工作中的一些方法。
jquery获取尺寸的方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。
如下布局，如果将:sm="0"则会导致456始终不显示 下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏，不显示，但是如果这样做就会出现bug
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
::: tip 通信方式 系统层的WeixinJsBridage 两边提供的 evaluateJavascript 所实现。 即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。
文 | HustWolf 小程序的视图层，分为 WXML、WXSS 和基础组件。今天，我们就来详细解析 WXML 和 WXSS。 WXML WXML（WeiXin Markup Language）是为小程序 MINA 框架设计的语言，它结合基础组件、事件系统，可以构建出页面的结构。 说的通俗一点，WXML 有点类似 HTML，相当于一个最后的收尾的设计师。它可以告诉你，这个地方要有个图片，然后这个图片的地址是什么；然后告诉你这儿有个按钮，这个按钮控制什么的开关。 这么一说，我还觉得做小程序就像盖房子，有人负
前言 在技术细节的内容开始之前，您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <
所谓高分屏，就是在同样大小的屏幕面积上显示更多的像素点，这样可以呈现更好的可视效果的屏幕。例如，我的笔记本是15.6寸，理论上它的屏幕分辨率应该是1920 x 1080像素，但实际上我的笔记本屏幕分辨率确实2560 x 1440像素，也就是俗称的2K屏。这样的高分屏虽然实现了更加细腻的图像和更加清晰的文本，但也对软件适配带来了问题。
在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。
BOM(Browser Object Model 即：浏览器对象模型)，描述与浏览器进行交互的方法和接口。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，使用这个框架可以简单高效的开发出适配各种屏幕的网站应用，即是编写一套代码，适用多重平台（PC，平板，手机等）。Bootstrap 相比其他框架，自由度更高，它提供了基本的样式和基本的组件，而不会在创造上约束开发者的思维。
rem是什么？l rem是一种新的单位，是一个相对单位，类似于em。 不同的是rem的基准是相当于html元素的字体大小
因移动设备的多样性，特别是 Android 的碎片化严重，存在各种各样的分辨率，而 Flutter 跨平台开发又需同时支持 Android 和 iOS ，为尽可能的还原设计图效果提升用户体验，屏幕适配就势在必行了。
手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。
1.看第一个例子,当我们按比例放置多个TextView时，在没有添加内容或者内容没有超过分配的宽度时，这些TextView会很正常的显示在屏幕上，但是当某一个TextView 的内容宽度多于分配的宽度时， 就会 出现 如下情况。
viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
