流式布局_流式布局适配 - CSDN
精华内容
参与话题
  • 前端开发--流式布局

    千次阅读 2019-01-22 13:04:33
    **百分比布局也叫作流式布局、弹性盒布局。**手机网页没有版心,都左右撑满。 百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。 如果用百分比写width,...

    百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心,都左右撑满。
    百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

    如果用百分比写width,那么指的是父元素width的百分之多少。
    如果用百分比写height,那么指的是父元素height的百分之多少。
    如果用百分比写padding,那么指的是父元素width的百分之多少,无论是水平的padding还是竖直的padding。
    如果用百分比写margin,那么指的是父元素width的百分之多少,无论是水平的margin还是竖直的margin。
    不能用百分比写border的宽度

    展开全文
  • 经典的流式布局实现方法总结(一)

    万次阅读 2020-06-10 23:43:20
    经典的流式布局

    前言:今天总结一下经典的流式布局的几种实现方法,方便以后查看.

    流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一。

    流式布局的特征

    • 宽度自适应,高度写死,并不是百分百还原设计图。
    • 图标都是固定死大小的,包括字体等也是固定死的。并不是所有的东西都是自适应的。
    • 一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化,对于小图标或者文本等, 一般都是定死宽高大小。

    经典的流式布局结构:

    1. 左侧固定,右侧自适应
    2. 右侧固定,左侧自适应
    3. 两侧固定,中间自适应(圣杯布局,双飞翼布局)
    4. 等分布局
    左侧固定右侧自适应的三种实现方法:

    1.利用bfc块级格式化上下文, 实现左侧固定右侧自适应
    (1) 让左边的盒子 float: left;
    (2) 让右边的盒子 overflow: hidden;

    具体css代码

    <style>
        * {
          margin: 0;
          padding: 0;
        }
        .father {
          height: 400px;
          background-color: pink;
        }
        .left {
          height: 300px;
          width: 200px;
          background-color: orange;
          float: left;
        }
        .right {
          height: 350px;
          background-color: blue;
          /* 触发了bfc的盒子, 不与浮动的元素重叠 */
          overflow: hidden;
        }
      </style>
    

    html结构

    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    

    2.利用定位实现左侧固定右侧自适应

    (1) 给父盒子设置padding-left 值

    (2) 给左侧子盒子设置width = padding-left ,并定位到父盒子的padding-left上.

    (3) 右侧盒子自适应

    具体css代码

    <style>
        * {
          margin: 0;
          padding: 0;
        }
        .father {
          height: 400px;
          background-color: pink;
          position: relative;
          padding-left: 200px;
        }
        .left {
          height: 300px;
          width: 200px;
          background-color: orange;
          position: absolute;
          left: 0;
          top: 0;
        }
        .right {
          height: 350px;
          background-color: blue;
        }
      </style>
    

    html结构

    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    

    3.利用flex布局 实现左侧固定右侧自适应

    (1) 给父盒子设置display:flex ;

    (2) 左侧盒子设置固定宽高 ,右侧盒子设置flex:1 ;

    具体css代码

    <style>
        * {
          margin: 0;
          padding: 0;
        }
        .father {
          height: 400px;
          background-color: pink;
          display: flex;
        }
        .left {
          height: 300px;
          width: 200px;
          background-color: orange;
        }
        .right {
          flex: 1;
          height: 350px;
          background-color: blue;
        }
      </style>
    

    html结构

    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    

    扩展

    BFC 块级格式化上下文

    Block Formatting Context: 页面上一个隔离的独立渲染区域

    触发成为 BFC 盒子的特点:

    1. 触发了 BFC 的盒子, 就成为了页面上的一个隔离的独立容器, 容器里面的子元素不会在布局上影响到外面的元素
      应用: 解决塌陷问题, 清除浮动
    2. 触发了BFC的普通盒子, 不会与浮动元素重叠
      应用: 圣杯布局, 左侧固定右侧自适应

    如何触发 BFC

    • float: left; float: right;
    • overflow的值不为visible。
    • display的值为inline-block、table-cell、table-caption
    • position的值absolute, fixed
    展开全文
  • 简单的流式布局(完整版)

    千次阅读 2018-05-30 13:40:58
    1.首先创建一个自定义View类:public class CustomView extends ViewGroup { private int mleftMargin=20; private int mtopMargin=20; public CustomView(Context context) { this(context,null);...



    1.首先创建一个自定义View类:

    public class CustomView extends ViewGroup {
        private int mleftMargin=20;
        private int mtopMargin=20;
    
        public CustomView(Context context) {
            this(context,null);
        }
    
        public CustomView(Context context, AttributeSet attrs) {
            this(context, attrs,0);
        }
    
        public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            measureChildren(widthMeasureSpec,heightMeasureSpec);
    
            int leftMargin = mleftMargin;
            int topMargin = mtopMargin;
    
            int viewHeight = 0;
            int viewWidth = 0;
    
            //父控件传进来的宽度和高度以及对应的测量模式  
            int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
            int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
            int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
            int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
    
            switch (modeHeight){
                case MeasureSpec.AT_MOST:
                    int measuredHeight = 0;
                    for (int j = 0; j < getChildCount(); j++) {
                        int measuredWidth = getChildAt(j).getMeasuredWidth();
                        measuredHeight = getChildAt(j).getMeasuredHeight();
                        if (leftMargin+measuredWidth+mleftMargin>getWidth()){
                            leftMargin=mleftMargin;
                            topMargin+=measuredHeight+mtopMargin;
                        }
                        leftMargin+=measuredWidth+mleftMargin;
                    }
                    topMargin+=measuredHeight+mtopMargin;
                    break;
            }
            setMeasuredDimension(sizeWidth,topMargin);
        }
    
        @Override
        protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
            int leftMargin = mleftMargin;
            int topMargin = mtopMargin;
    
            for (int j = 0; j < getChildCount(); j++) {
                int measuredWidth = getChildAt(j).getMeasuredWidth();
                int measuredHeight = getChildAt(j).getMeasuredHeight();
                if (leftMargin+measuredWidth+mleftMargin>getWidth()){
                    leftMargin=mleftMargin;
                    topMargin+=measuredHeight+mtopMargin;
                    getChildAt(j).layout(leftMargin,topMargin,leftMargin+measuredWidth,topMargin+measuredHeight);
                }else {
                    getChildAt(j).layout(leftMargin,topMargin,leftMargin+measuredWidth,topMargin+measuredHeight);
                }
                leftMargin+=measuredWidth+mleftMargin;
            }
        }
    }
    

    2.自定义搜索框布局xml:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".view.activity.SearchActivity">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:background="@null"
            >
            <ImageView
                android:id="@+id/search_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:src="@drawable/sao_kind" />
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="20dp"
                android:layout_toLeftOf="@id/result_search"
                android:layout_toRightOf="@id/search_back"
                android:background="@drawable/addatten_edit"
                android:focusable="true"
                android:focusableInTouchMode="true">
                <ImageView
                    android:id="@+id/relation_search"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="9dp"
                    android:src="@drawable/a_4" />
                <View
                    android:id="@+id/search_line"
                    android:layout_width="0.5dp"
                    android:layout_height="20dp"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="10dp"
                    android:layout_toRightOf="@id/relation_search"
                    android:background="#fff"></View>
    
                <EditText
                    android:id="@+id/search_input_search"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="10dp"
                    android:layout_toRightOf="@id/search_line"
                    android:background="@null"
                    android:hint="请输入关键词搜索"
                    android:textColor="@color/login_title"
                    android:textSize="14sp" />
            </RelativeLayout>
            <TextView
                android:id="@+id/result_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="15dp"
                android:textSize="14sp"
                android:text="搜索"
                />
        </RelativeLayout>
        <TextView
            android:paddingTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="热搜"
            android:textSize="20sp"
            />
        <com.example.mall.view.custom.CustomView
            android:id="@+id/search_flowlayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#fff"
            android:paddingTop="10dp"
            >
        </com.example.mall.view.custom.CustomView>
        <Button
            android:id="@+id/search_clear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="清空记录"/>
        <ListView
            android:id="@+id/search_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ListView>
    </LinearLayout>

    3.在Activity要写的内容:

    public class SearchActivity extends BaseActivity implements View.OnClickListener {
        String[] name={"手机","电脑","玩具","手机","电脑","苹果手机", "笔记本电脑", "电饭煲 ", "腊肉",
                "特产", "剃须刀", "宝宝", "康佳", "特产", "剃须刀", "宝宝", "康佳"};
        private ImageView mSearchBack;
        private ImageView mRelationSearch;
        private View mSearchLine;
        /**
         * 请输入关键词搜索
         */
        private EditText mSearchInputSearch;
        /**
         * 搜索
         */
        private TextView mResultSearch;
        private CustomView mSearchFlowlayout;
        /**
         * 清空记录
         */
        private Button mSearchClear;
        private ListView mSearchList;
        private TextView textView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
        @Override
        void initView() {
              mSearchBack = (ImageView) findViewById(R.id.search_back);
              mRelationSearch = (ImageView) findViewById(R.id.relation_search);
              mSearchLine = (View) findViewById(R.id.search_line);
              mSearchInputSearch = (EditText) findViewById(R.id.search_input_search);
              mResultSearch = (TextView) findViewById(R.id.result_search);
              mSearchFlowlayout = (CustomView) findViewById(R.id.search_flowlayout);
              mSearchClear = (Button) findViewById(R.id.search_clear);
              mSearchClear.setOnClickListener(this);
              mSearchList = (ListView) findViewById(R.id.search_list);
        }
        @Override
        void initData() {
             //设置默认显示
            for (int i = 0; i < name.length; i++) {
                textView = new TextView(this);
                textView.setText(name[i]);
                //设置背景
                textView.setBackground(getDrawable(R.drawable.addatten_edit));
                //设置内边距
                textView.setPadding(5,5,5,5);
                textView.setTextSize(20);
                //设置颜色
                textView.setTextColor(Color.RED);
                //添加数据
                mSearchFlowlayout.addView(textView);
            }
               //点击搜索添加
            mResultSearch.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                String s = mSearchInputSearch.getText().toString();
                textView = new TextView(SearchActivity.this);
                textView.setBackground(getDrawable(R.drawable.addatten_edit));
                textView.setPadding(5,5,5,5);
                textView.setTextSize(20);
                textView.setText(s);
                mSearchFlowlayout.addView(textView); 
                }
            });
              //mSearchFlowlayout.invalidate();  刷新UI布局
              // mSearchFlowlayout.removeAllViews(); 删除所有      
              //mSearchFlowlayout.removeView();   删除单个子控件
        }
        @Override
        BasePresenter setBasePresenter() {
            return null;
        }
        @Override
        int setChildContenView() {
            return R.layout.activity_search;
        }
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                default:
                    break;
                case R.id.search_clear:
                    mSearchFlowlayout.removeAllViews();
                    break;
            }
        }
    }

    4.自定义边框:addatten_edit.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 内部颜色 -->
        <solid
            android:color="#ffffff" />
        <!-- 边缘线条颜色 -->
        <stroke
            android:width="1dp"
            android:color="#9e9e9e" />
        <!-- 圆角的幅度 -->
        <corners android:radius="45dp" />
    </shape>
    

    展开全文
  • 理解流式布局和响应式布局

    万次阅读 2018-06-10 20:10:55
    流式布局流式布局在CSS2时代就有,主要是靠百分比进行排版,可以在不同分辨率下显示相同的版式。流式布局:网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,...

    流式布局:

    流式布局在CSS2时代就有,主要是靠百分比进行排版,可以在不同分辨率下显示相同的版式。

    流式布局:网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

    这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那是屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:宽度使用百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。


    响应式布局:

    响应式布局的关键技术是CSS3中的媒体查询监测设备屏幕大小,通过css媒体查询来有针对性的更改页面的布局,可以监测屏幕方向(移动设备),设备类型等等,核心在于感知。在不同屏幕下可以显示不同版式。响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)


    响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果,

    嗯,因为是css3时代才有的新技术,那坑爹的IE6、7、8铁定不支持了,所以,记得使用媒体查询的时候要用js做一下小小的兼容哦!

    对于IE6/IE7/IE8浏览器,我们使用JavaScript,根据用户显示器的分辨率,为其动态创建一个CSS 文件,在头部head标签中嵌入如下的code:

    <script>
    if (!window.screenX) {
        //IE6~8
        var oStyle = document.createElement("link");
        oStyle.rel = "stylesheet";
        oStyle.type = "text/css";
        if (screen.width > 1024) {
            oStyle.href = "widthScreen.css";	
        } else {
            oStyle.href = "normalScreen.css";	
        }
        document.getElementsByTagName("head")[0].appendChild(oStyle);
    }
    </script>
    

    对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。



    参考文章:响应式布局和流式布局的区别响应式布局几种常见的网页布局

    展开全文
  • 流式布局

    千次阅读 2018-01-17 15:43:04
    之前这种布局都是百分比,包括间隙,直接问题是屏幕大的时候 间隙太大,而需求是中间间隙不变,盒子随着屏幕变大变小,所以总结了一下,以后用的时候直接套就可以~ 先贴结构: div class="father"> div class=...
  • 流式布局与响应式布局

    千次阅读 2018-04-13 09:42:39
    常见的面试题会让你聊一聊流式布局与响应式布局,我还没遇到过直接问他俩区别的面试官,都是根据我的项目(里面有用到流式布局+响应式布局)。围绕这两点感觉网上大部分博客都长得差不多,那我就用自己粗浅的理解说...
  • 流式布局和rem布局

    2020-07-22 23:39:57
    flexible 是淘宝发布的js插件,用来rem布局,通过js动态改变根元素的大小
  • 【Android】掌握自定义LayoutManager(二) 实现流式布局

    万次阅读 多人点赞 2016-11-17 00:26:15
    转载请标明出处: ... 本文出自:【张旭童的博客】 ...自定义LayoutManager实现的流式布局 欢迎star,pr,issue。本系列文章目录: 掌握自定义LayoutManager(一) 系列开篇 常见误区、问题、注意事项,常用API。 掌握自
  • java布局——流式布局

    千次阅读 2016-07-13 13:44:56
    * 流式布局实现 * */ package swing; import java.awt.*; import javax.swing.*; public class Test3 extends JFrame{ JButton jb1,jb2,jb3,jb4,jb5,jb6; public static void main(String[] args) { // TODO...
  • Bootstrap 流式布局

    千次阅读 2018-05-24 16:50:41
    流式布局同理,将Bootstrap的流式栅格放到 class="container-fluid" 的流式容器中,即可创建流式布局流式布局将填满整个视口宽度。如:&lt;div class="container-fluid"&gt; &lt...
  • 静态即传统Web设计,对于PC设置一个布局,在屏幕宽高
  • 为RecyclerView量身打造一款流式布局

    万次阅读 热门讨论 2018-01-18 09:54:18
    之前也写了一个ViewGroup版本的流式布局,该流式布局有两大优点:可以设置行数和是否内容在该行中居中显示(猛戳),说真的自从对RecyclerView的LayoutManager有新的认识后,完全不用担心很多的复杂布局了。而且对...
  • Java Swing 之流式布局管理器

    千次阅读 2014-05-01 16:32:45
    流式布局管理器是面板的默认布局管理,
  • html css 流式布局

    千次阅读 2019-03-21 09:25:01
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hello</title> <style type="text/css"> .container { ... min-height...
  • java的布局中最为简单的便是FlowLayout流式布局,组件按照设置对齐方式从左向右排列,一行排满到下一行继续排列。让我们直接看一下代码:public Demo01() { setTitle("流式布局应用"); setBounds(200, ...
  • 实验64:流式布局管理器编写一个java程序,在程序中生成一个框架窗口,设置窗口的布局管理器为流式布局管理器,往窗口中加入3个按钮import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout;...
  • 下载地址
  • 很简单的Vue.js瀑布流布局

    千次阅读 2017-08-04 16:53:41
    实现瀑布流布局也很简单。 将页面分为N列。(可以用flex布局) 需要渲染的数据列表在filters里预处理。新建一个N项嵌套列表,前N个直接对应放进取,后面的每个放在总高度最小的那一项列表。 分列渲染。
  • 流式布局 流式布局在移动端是非常常见的,比如商品列表,瀑布流、标签页等等。使用Android原生来实现流式布局还是有点麻烦的,甚至需要自定义view或者使用第三方的库。而在Flutter中,官方为我们提供了流式布局的...
  • 前端布局的总结

    千次阅读 2019-01-23 22:08:40
    例如流式布局的解决方案有不少弊端,它虽然可以让各种屏幕都适配,但是显示的效果极其的不好,因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果,但是目前行业里用流式布局...
1 2 3 4 5 ... 20
收藏数 19,581
精华内容 7,832
关键字:

流式布局