页面布局

flex布局 flex布局 也叫作 弹性盒子布局 ，可以简便、完整、响应式的实现各种页面布局，同时也支持所有的浏览器。父级元素设置css样式为：display:flex。内容的位置用justify-content来控制，常用的属性有： space-between 、 space-around 、 center 、 left 、 right 。(注释：类名为father的盒子中写了4个类名为son的盒子) 一共有6个属性是添加给父级的，分别有： flex-direction 、 flex-wrap 、 flex-flow 、 justify-content 、 align-items 、 align-content 。 flex-direction 用来决定主轴的方向，默认值为row，所以默认横向排列。row|row-reserve|column|column-reserve。 flex-wrap 来决定换行，nowrap不能换行；wrap换行，多余的自动在左下方；wrap-reserve换行，多余的自动在左上方，默认值为nowrap。 flex-flow 是flex-direction和flex-wrap的简写，默认值为row nowrap。 .father { width: 500px; height: 150px; display: flex; justify-content

一、静态布局（static layout） 　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法 　　 PC： 居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 　　 移动设备： 另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。 优点 ：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。 缺点 ：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。 二、流式布局（Liquid Layout） 　　流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。 　　网页中主要的划分区域的 尺寸使用百分数

瀑布流式布局（简称瀑布流）最先在网站上应用 Pinterest ( 貌似是最早使用这种布局的网站了)， Mark之 ， 蘑菇街 ， 点点网等页面都采用了这种布局 。那么什么是瀑布流呢？瀑布流的好处在哪？ 瀑布流，又称瀑布流式布局、瀑布墙。是目前比较流行的一种网站页面布局方式，视觉表现为参差不齐的多栏布局，随着瀑布流效果页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。 瀑布流的布局原理： 这种布局是基于响应式布局的。他可以 根据浏览器宽度以及每列宽度计算出列表个数。来动态加载图片。且需要预加载几张图片，再当滚动条滚动的时候，对每一列的底部位置做检测，如果在屏幕中或屏幕上方，则立即append一个新图片。因为，滚动是连续的，所以，我们实际看到的效果是图片不断load出来。(如果加载的图片太多最好做好本地缓存)。让用户的体验效果更佳。 瀑布流的实现方法： 方法一： 当浏览器宽度改变的时候，页面上有个 id 为 waterFallDetect 空 span 标签，这个标签作用有两个：一是实现两端对齐效果，二是用来检测瀑布流布局是否需要刷新。 检测原理如下： 该 span

许宏健 过去两天完成的任务 口头描述 用RecyclerView重写了listview的界面,减少了代码复用的难度 代码签入图片 接下来的任务 学习RecyclerView切换页面的操作，真正实现与他人的代码实现无缝接入 还剩下哪些任务 1.页面切换 2.聊天界面优化 燃尽图 遇到了哪些困难 遇到了网上查不到资料的困难，可能其他开发安卓的人为这是个很简单的问题，所以没有人写这个要怎么做，所以只能靠自己的摸索，所以我才决定换一种布局，以求突破。 有哪些收获和疑问 收获：学会了RecyeclerView的大概用法。疑问：到底要怎样才能使用这种布局切换页面呢？这种布局为什么跟其他布局有这么大的区别呢。 来源： https://www.cnblogs.com/xhongj/p/11991480.html

1、设置渐变背景 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:centerColor="#1FBDFF" android:endColor="#1FA5FF" android:startColor="#02EEFF" android:type="linear" /> </shape> 2、设置圆角渐变按钮 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 连框颜色值 --> <item> <shape> <corners android:radius="4dp" /> </shape> </item> <!-- 主体背景颜色值 --> <item android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp"> <shape> <gradient android:centerColor="#1FBDFF" android:endColor="#1FA5FF" android:startColor="#02EEFF"

移动开发不同与PC端开发，可能会经历各种意想不到的问题，尤其是移动端应用刚起步的几年；随着移动互联网的快速发展，有些问题已经得到了很好的支持，如1像素边界的问题。当然，要更好地解决这些移动端的问题，就需有移动端领域相关的知识，下面就来说说。 dpr设备像素比 首先说一下，这个dpr不仅仅是移动端才有的，pc端也有，但是对一些移动端的问题产生的原因及解决显得比较重要，比如1像素的问题。先来看几个概念： 物理像素（physical pixel） 一个物理像素就是显示设备上最小的物理显示单元，每个物理像素都有自己的颜色值和亮度值。例如iphone6手机屏幕有750*1334个物理像素 设备独立像素（density-independent 设备独立像素又叫密度无关像素，也可以叫逻辑像素，程序使用的虚拟像素如css像素，可以理解为显示设备坐标系统中的一个点； 设备像素比dpr（device pixel ratio) 设备像素比，简称dpr，定义了物理像素与设备独立像素之间的对应关系，具体的对应关系是一个计算公式如下： dpr = 物理像素 / 设备独立像素 上面计算的dpr是指某一个方向上如x或者y方向，二者dpr值相同；程序中获取dpr方式如下： js获取dpr使用 window.devicePixelRatio css获取dpr使用 -webkit-device-pixel-radio

Android-sdk下常用的ADT工具： AVD manager（安卓自带的模拟器，占用CPU资源较高，启动慢） SDK manager 还需要装对应的安卓版本 坑：装的时候提示某个目录下面没有文件，无法操作 解决方法：SDK manager 右键使用管理员身份运行 tools下的uiautomatorviewer.bat 批量执行文件，用来定位UI界面 左上角四个按钮： 1.打开之前保存的页面布局 2.详细页面布局展示 3.概要页面布局展示 4.保存布局（方便下次不需要再重新获取布局） 坑：uiautomatorviewer经常报错 需要分析报错原因，有的是设备断开了 有点需要重新打开此工具 来源： https://www.cnblogs.com/wx921308494/p/11967065.html

不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。but，我们要对于市面上的手机各式各样的分辨率进行适配，刚接触移动端开发的时候是不是有点猝不及防哈哈，尤其是去年年中以前老版本的微信内置浏览器用的X5内核，给网友们戏称移动端IE... 今天的主题是讲的是我对移动端多终端适配的解决方案和移动端适配的有关布局的知识总结，下面正式开始。 基本概念和原理 首先要了解的重要的基础知识点：物理像素，设备独立像素，设备像素比，css像素，布局视口，可视视口,理想视口以及css单位rem。 物理像素（设备像素） 屏幕的物理像素，又被称为设备像素。任何设备屏幕的物理像素出厂时就确定了，是固定不变的。 设备独立像素 设备独立像素也可以理解为CSS像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 设备像素比 设备像素比简称为dpr

最近比较流行tablayout+viewpager+fragment的点击导航栏实现页面切换的效果，可以参考： http://blog.csdn.net/qq_33425116/article/details/52599818#t5 我在这里介绍的都是比较原始的切换做法。 RedioGroup+Fragement(推荐) 运行效果： 写布局文件： 示例RadioButton: <RadioButton android:id="@+id/rb_home" style="@style/tab_style" android:checked="true" android:drawableTop="@drawable/bar_home_bg" android:text="主页" /> 样式文件tab_style: <style name="tab_style"> <item name="android:layout_width">0dip</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_gravity">center_vertical</item> <item name="android:layout_weight">1</item> <item name=

原文地址： http://www.333cn.com/shejizixun/201839/43495_145847.html 写在前面 近年来，随着科学技术的发展，终端的分辨率越来越多，响应式的设计氤氲而生。然而，作为设计师，你是否遇到过这样的情况：当你设计响应式网站的时候，由于不了解其规范及实现原理，而根据自己的理解设计出了一套设计稿。然而，当这份设计稿放到开发面前时，却发现很多你考虑得很美好的设计方案难以被开发，最终无法还原设计稿的效果。 本文围绕响应式的设计方法来写，重点简述流式网格、元素切换、响应式样式。看完本文，有助于你设计出兼容性更强，对开发友好的响应式设计。对缩短项目的开发周期，降低项目的开发、维护成本，推动项目落地有一定的帮助。 首先，我们先来了解几个概念。这几个概念有涉及到设计，也有涉及到开发。当然，我们的目的不是学习开发技术，而是通过对这些概念的了解，更好的掌握响应式设计的方法。 1. 响应式布局 响应式布局是Ethan Marcotte在2010年提出的概念。他认为，一个网站能够兼容多个终端 (指不同分辨率，不同Dpi的显示设备) ，而不是为每一个终端做一个特定的版本 ，这样的网站布局方式即称为响应式布局。 由于科技的迅速发展，终端设备的分辨率越来越多样化，响应式布局正是为此而生，其目的是确保一个页面在所有终端上都能呈现出令人满意的效果。