自适应 | 易学教程

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

弹性布局(em布局/rem布局) em和rem的区别在了解弹性布局前我们需要先知道em和rem rem： font size of the root element， rem是相对于根元素<html>来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。 em：以父节点font-size大小为参考点，标准不统一，容易造成混乱 em/rem与px的换算浏览器的默认字体高度一般为 16px ，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body

使用flexbox的自适应照片布局

阅读更多关于使用flexbox的自适应照片布局

作者：Tim Vam Damme 让我们来看看一种超轻量级的方法，它可以为一组任意大小的照片创建水平砖砌效果。将任何照片丢到上面，它们将边对边无缝对齐。该解决方案不仅轻巧，而且非常简单。我们将使用无序的图片列表和仅仅17行CSS代码，其中重点要领是flexbox和object-fit。 #为什么? 我有两个业余爱好：用照片记录生活，以及找出新旧CSS属性有趣的组合方式。几周前，我参加了XOXO(注：XOXO是一个针对在线生活和工作的独立艺术家的实验性节日)并且拍摄了大量照片，然后我缩减为39张照片。为了拥有我自己的内容，我花了两年的时间来组建一个简单的照片博客，但始终无法实现我想要的布局：一个简单的砖砌布局，其中的照片填充行的同时要尊重其宽高比例(在iOS、Google Photos、Flickr上可以考虑使用Photos.app)。我进行了一些研究来查看是否有任何轻量级、非JavaScript的选项，但是不能找到适合我需要的任何内容。面对一些延误的航班，我开始鼓捣一些代码，限制自己尽可能简化事情(因为这是我对乐趣的定义)。 #基本标记由于我基本上是在创建图片列表，因此我选择了无序列表： <ul> <li> <img> </li>  <li> <img> </li> </ul> 　　 #所有像下冰雹一样的弹性盒子然后是一连串电灯泡时刻：

字围、浮动的影响、制作 tab 栏

阅读更多关于字围、浮动的影响、制作 tab 栏

字围　　一个有浮动一个没浮动就会有字围的效果浮动的问题　　浮动的元素不会撑高父级清除浮动的影响　　1. 解决父级高度的问题，但是高度不能自适应　　2.用清除浮动影响属性： clear，属性值：left、right、both，但是高度不能自适应　　3.隔墙法：在互相影响的元素中间加一道墙，组个开两边的元素，墙上面添加一个clear属性，高度自适应了，但是margin失败　　4.外墙法：在右浮动元素的父盒子之间隔一道墙。添加两个类，一个是清除浮动，一个模拟外边距　　成功！！！　　　　缺点：每个浮动的盒子都需要一道墙，造成冗余没有意义的标签　　5.overflow：hidden 　　　　盒子内部的元素可以设置溢出模式　　　　overflow：溢出的意思　　　　属性值：hidden，溢出隐藏　　　　　　　　auto，溢出滚动　　　　解决了：浮动互相影响，高度自适应，margin 失败的问题没有缺点　　　　实际工作中，用overflow来清除浮动　如果遇到大的结构，就加一道外墙　制作矩形变色的边框。方法，用两个盒子来制作，顶部给父盒子设置，左右给子盒子设置　制作 tab 栏　　　　没有被选中的主体部分，需要隐藏，选中的显示　　给所有的元素加一个显示模式隐藏，给要显示的元素加一个显示模式块级　　display： none; 隐藏元素　

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。　在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？ ) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem ）　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见 content"width=640

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

㈠概念 ⑴ 静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。例如：浏览器窗口是1000px，那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。 ⑵ 自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。但是字体不会改变 ⑶ 流式布局：rem布局+viewport;元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。比如，对移动端来说不错 ⑷ 响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。 ⑸ 弹性布局：要点在于使用 em和rem单位来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺寸主要根据字体大小而变化。㈡布局特点 ⑴静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 ⑵自适应布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 ⑶流式布局：屏幕分辨率变化时

Android 自适应不同分辨率屏幕

阅读更多关于 Android 自适应不同分辨率屏幕

前几天，面试的时候，有问道关于如何自适应不同分辨率屏幕的问题。当时也是一知半解，今天索性看了很多资料，好好的总结了下。首先解释几个基本的概念： in：表示英寸，是屏幕的物理尺寸。每英寸等于2.54厘米。例如，形容手机屏幕大小，经常说，3.2（英）寸、3.5（英）寸、4（英）寸就是指这个单位。这些尺寸是屏幕的对角线长度。如果手机的屏幕是3.2英寸，表示手机的屏幕（可视区域）对角线长度是3.2*2.54 = 8.128厘米。 px：表示屏幕实际的象素。例如，320*480的屏幕在横向有320个象素，在纵向有480个象素。 dip或dp（与密度无关的像素）:这个和设备硬件有关，为了支持WVGA、HVGA和QVGA推荐使用这个。一种基于屏幕密度的抽象单位。设置一些view的宽高可以用这个，一般情况下，在不同分辨率，都不会有缩放的感觉。如果用px的话，320px占满HVGA的宽度，到WVGA上就只能占一半不到的屏幕了，那一定不是你想要的。 sp: 除了与密度无关外，还与scale无关主要处理字体的大小。 density:屏幕密度，每英寸有多少个像素显示点，与分辨率是两个概念 VGA:480*640 Low：120 Medium：240 High：480 方便记忆的法子：QVGA即"Quarter VGA"。顾名思义即VGA的四分之一尺寸 HVGA 即“Half VGA”

Android 屏幕自适应问题

阅读更多关于 Android 屏幕自适应问题

Android9 patch 图片（.9.png 格式图片) 的特点和制作一.9.png格式的文件的特点与传统的png 格式图片相比， 9.png 格式图片在图片四周有一圈一个像素点组成的边沿，该边沿用于对图片的可扩展区和内容显示区进行定义。这种格式的图片在android 环境下具有自适应调节大小的能力。(1)允许开发人员定义可扩展区域，当需要延伸图片以填充比图片本身更大区域时，可扩展区的内容被延展。(2)允许开发人员定义内容显示区，用于显示文字或其他内容. 如下图所示：左侧和上方的黑线交叉的部分即可扩展区域,右侧和下方的黑线交叉的部分即内容显示区. 二 .9.png 图片的制作 android sdk 的 tools文件夹下提供了制作该格式图片的工具 draw9patch.bat。使用此工具打开任意图片之后,将鼠标置于图片上。被黑色覆盖的是不可编辑(锁住)的区域,周围的一圈一个像素的边沿是可编辑区域。按住鼠标左键，在左侧和上方的边沿画出可扩展区。在右侧和下方画出内容显示区。完成绘制以后，选择file-> save ,即可保存为 .9.png 格式的文件,并在android项目中使用。代码动态布局： [java] view plain copy //获取屏幕高宽 DisplayMetrics metric = new DisplayMetrics();

使用flex布局实现宽度自适应

阅读更多关于使用flex布局实现宽度自适应

1.两侧固定，中间自适应 .box{ width: 100%; display: flex; height: 300px; } .left{ width: 100px; height: 200px; background-color:red; } .right{ width: 100px; height: 200px; background-color:red; } .center{ flex: 1; height: 300px; background-color: lime; } <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> 2.左侧固定，右侧自适应 .box{ width: 100%; display: flex; height: 300px; } .left{ width: 100px; height: 200px; background-color:red; } .right{ flex: 1; height: 300px; background-color:lime; } <div class="box"> <div class="left"></div> <div class="right"><

iOS-Masonry布局UIScrollView

阅读更多关于 iOS-Masonry布局UIScrollView

前言 IOS自动布局有sb、xib自适应或者是纯代码编写frame布局，前者本人不太喜欢，后者计算太多也是比较繁琐，masonry这个第三方库，其实是封装了autolayout的约束，易于我们使用纯代码编写自适应布局。（一）下面的这个例子是一个绑定手机号成功的页面布局； #import "BindSuccessViewController.h" #import <Masonry.h> #define SCREEN_WIDTH CGRectGetWidth([UIScreen mainScreen].bounds) @interface BindSuccessViewController () { UIImageView *imageView; UILabel *alertlabel; UIImageView *hfImageView; UIButton *sureButton; UIButton *cancelButton; UIScrollView *scrollView; UIView *layoutView; } @end @implementation BindSuccessViewController - (void)viewDidLoad { [super viewDidLoad]; self.navigationItem.title = @"修改手机号"; self

仿微信.QQ聊天界面

阅读更多关于仿微信.QQ聊天界面

仿微信.QQ聊天界面,气泡图自适应箭头图片最近做了一个IM的项目.关于实现IM有很多方法.毕竟协议就那么几种.开源的可以用XMPPFramework等, 第三方有融云、环信等.若只是实现临时通信还可以用WebSocket. 这些技术网上实现的demo多的一笔.但是只是实现了功能.作为客户端很多UI实现的细节并没有做到. 现在把聊天界面实现的细节记录一下. 我用的是XMPPFramework,这里关于协议和里面的方法全部忽略,只是抽出实现UI的几个方法. 一、文本聊天最常用的就是发送文本了, 如图1.1: 文本聊天是用button( 也可以用其他控件 ) 显示聊天的内容, 主要就是控制显示内容的内边距和自适应高度. 设置titleContent内边距和自适应高度这个没什么难度 <span style="color:#FF6666;"><span style="color:#000000;">自适应高度:根据聊天内容获取size</span></span> [chat.contentText boundingRectWithSize:CGSizeMake(contentMaxW, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName

订阅自适应