当前位置： 移动技术网 > 移动技术>移动开发>WP > 前端学习（九）流式布局

前端学习（九）流式布局

2020年08月10日  | 移动技术网移动技术  | 我要评论
流式布局的概念流式布局，也就是百分比布局将盒子的宽度设置成百分比，根据屏幕的实际宽度进行伸缩，不受固定像素的限制，内容向两侧填充设置max-width，min-width，使得内容在合理的范围内流式布局的常用技巧设置视口<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">选择默认的样

流式布局的概念

  • 流式布局，也就是百分比布局
  • 将盒子的宽度设置成百分比，根据屏幕的实际宽度进行伸缩，不受固定像素的限制，内容向两侧填充
  • 设置max-width，min-width，使得内容在合理的范围内

流式布局的常用技巧

设置视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

选择默认的样式

normalize.css

链接css文件时，默认样式写在前，自己的写在后，否则某些样式会被层叠掉

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

CSS3盒子模型

CSS3的盒子模型box-sizing中，盒子的宽度为width已经包含了padding和border，在移动布局中能简化盒子尺寸的计算

box-sizing: border-box;

特殊样式处理

 /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

常用的初始化样式

body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    color: #666;
    text-align: center;
}

二倍图插入图片

需要将图片的宽度或高度指定为原来的一半

<img src="img/test.png" alt="" width="26px">

二倍图背景精灵图

  1. 在fireworks中，打开比例限制，进行等比例缩放（但是注意不要保存）
  2. 量好尺寸
  3. 在样式中，按实际量到的位置和尺寸，设置background-size和background-position

其它

  • 块级元素在父盒子内单独占一行：用margin 0 auto进行居中，但是要有宽度和高度
  • 父盒子下几个块级元素浮动，或者行内块元素，共占一行：用text-align: center使得子元素内容居中，要有宽度和高度，
  • 使用vertical-align调整图片与文字的对齐
  • 使用line-height调整文字在盒子中的位置

本文地址：https://blog.csdn.net/whitefish520/article/details/107890406

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网