一.视口 1.常见屏幕知识 设备 解释 描述 宽 屏幕的宽度 - (单位:英寸) 屏幕的宽度 高 屏幕的高度 -(单位:英寸) 屏幕的高度 对角线 屏幕的对角线的长度 英寸 一般说手机尺寸 是指以屏幕对角线为衡量 单位是 英寸 逻辑分辨率 屏幕的宽度 * 屏幕的高度 (单位:px) 描述屏幕的宽度和高度 设备分辨率 物理像素点 屏幕里面一共拥有的物理像素点的个数 PPI 像素密度 每英寸所拥有的物理像素点 设备像素比 设备分辨率和逻辑分辨率的比例(取宽度比较) 可以简单理解为屏幕的清晰度的倍数…

移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗 手机浏览器,猎豹浏览器,以及其他杂牌浏览器. 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手 机操作系统都是基于Android修改开发的一样. 总结:兼容移动端主流…

1   流式布局 其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式  就是移动web开发使用的常用布局方式 2    Viewport 我们猜想下pc页面在移动设备上显示情况. 放不下,缩放? 我们测试下pc页面在移动设备上显示. 默认的缩放的显示的 认识viewport 在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大缩小,而且能设…

移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使用流式布局完成jd页面的制作 ☞移动端一些概念介绍[了解为主] 屏幕尺寸 指的是屏幕对角线的长度 设备大小(物理像素) 例如: 1366 * 768 px指的是在水平方向有1366个像素点,在垂直方向有768个像素点 像素密度(PPI) 概念: 每英寸所能容纳像素点的个数 (像素密度越大,画面越精细…

我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: 例如流式布局的解决方案有不少弊端,它虽然可以让各种屏幕都适配,但是显示的效果极其的不好,因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果. 他们在页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但…

liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿就是按照640px来做 布局方式: 流式布局,百分比布局和rem. 目前我用过的主要是这rem和流式布局 流式布局: 网页的主要架构部分按照百分比布局,宽度百分比,高度定死: 如果是图片宽度设置百分比,高度根据图片的比例自适应,如果是封面图片可以高度定死,用background-size:cover…

//流式布局管理器 import java.awt.*; import javax.swing.*; public class Jiemian2 extends JFrame{ //定义组件 JButton[] an = {null,null,null,null,null,null,null,null}; public static void main(String[] args){ //运行本类的构造方法 Jiemian2 jiemian = new Jiemian2(); } public…

Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将控件填充到下一行中,如一些关键字的标签,热搜词列表等位置出现的比较多.而且控件的类型可以摆放不同的,如一行中可以放置TextView,或者是ImageView,布局应该根据行中最大宽度来自动确定自己的每一行的宽度. 本次的Demo我们要实现如下的效果: 其实思路还是比较简单容易理顺的,看代码的前几遍…

效果图 用法 使用FlowRadioGroup代替RadioGroup 代码 import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.widget.RadioGroup; /** * 流式布局的RadioGroup */ public class FlowRadioGroup extends RadioGroup { public Flow…

一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的自定义布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点: 1.流式布局的特点以及应用场景    特点:当上面一行的空间不够容纳新的TextView时候,    才开辟下一行的空间 原理图: 场景:主要用于关键词搜索或者热门标签等场景2.自定义ViewGroup,重点重写下面两个方法 1.…