css移动端开发

​ 移动端浏览器主要对webkit内核兼容，现在的移动端主要针对手机端开发，移动端碎片化比较严重，分辨率和屏幕尺寸不一

调试方法

  1. 谷歌浏览器模拟手机调试
  2. 搭建本地web服务器，手机和服务器在同一个局域网内，通过手机访问服务器
  3. 使用外网服务器，直接IP或域名访问

视口

视口就是浏览器显示页面内容的屏幕区域。视口可以分布为布局视口、视觉视口和理想视口

布局视口layout viewport

  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
  • IOS、Android都把视口分辨率设置为980px，所以pc端上的页面大多都能在手机上呈现，只不过元素看起来很小，一般只能手动缩放页面

视觉视口 visual viewport

用户正在看到的网站的区域，可以通过缩放操作视觉视口，但是不会影响布局视口，布局视口仍然保持原来的宽度

理想视口 ideal viewport

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口，对设备来讲，是最理想的视口尺寸
  • 需要手写meta视口标签来通知浏览器操作
  • meta视口标签的目的：布局视口的宽度和理想视口的宽度保持一致，就是设备有多宽，布局的视口就有多宽

meta视口标签

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

width viewport宽度，可以设置device-width特殊值

initial-scale 初始缩放比，大于0的数字

maximum-scale 最大缩放比，大于0的数字

minimum-scale 最小缩放比，大于0的数字

user-scalable 用户是否可以缩放，yes或no

视口宽度和设备一致、默认缩放比1:0，不允许用户自行缩放、最大允许缩放比1.0，最小允许缩放比1.0

二倍图

物理像素&物理像素比

物理像素点指屏幕显示的最小颗粒，1px在PC端等于1物理像素，但是移动端不一定，一个1px能显示多少物理像素点成为屏幕像素比

  • 视网膜屏幕是一种显示技术，把更多物理像素点压缩至一块屏幕内，从而达到更多分辨率

多倍图

图片在手机中打开，会按照物理像素比放大，出现模糊现象，因此用倍图的方式（放二倍大小的图片再缩小到需要的大小）

背景缩放

  • background-size
  • 规定背景图像尺寸，两个参数为高度，宽度，只写一个参数就是指宽度，等比例缩放
  • 单位可以是百分比，是相对父盒子的百分比
  • cover：等比例缩放，要求完全覆盖盒子 ，可能有部分背景图片显示不全
  • contain: 等比例缩放，尽量铺满不会超出，可能会有空白

移动端开发选择

单独制作移动端页面（主流）

响应式页面兼容移动端

移动端技术解决方案

移动端初始化nomalize.css

http://necolas.github.io/normalize.css/

CSS3盒子模型box-sizing

boxing-size:border-box;(传统是content-box)

padding和border不会再撑大盒子

移动端可以完全兼容CSS3

特殊样式

-webkit-tap-highlight-color: transparent;//清除高亮
-webkit-appearance: none;//在ios上加上这个属性才可以给按钮和输入框自定义样式
img,a{-webkit-touch-callout:none}//禁止长按页面时弹出菜单

二倍精灵图

background-size缩放的是整个精灵图

  • 在firework里把精灵图等比例缩放为原来的一半
  • 根据大小测量坐标
  • 代码里的bgcsize也要缩放

移动端常见布局

主要包括流式布局、flex布局、rem布局

流式布局

百分比布局，非固定像素布局

  • 通过盒子的宽度设置成百分比来根据屏幕伸缩
  • 需要设定最大值最小值，防止影响内容显示max-width: min-width

flex布局

  • 传统布局兼容性好，但是布局繁琐，局限性高
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  • flex布局在PC端支持较差，移动端应用广泛
  • 采用flex布局的元素称为flex容器，所有子元素自动成为容器成员，成为flex项目，简称项目

布局原理

  • 任何一个容器都可以使用flex布局
  • 父盒子设为flex布局后，子元素的float、clear、和vertical-align属性失效
  • 原理：通过给父盒子添加flex属性，控制子盒子的位置和排列方式

flex父项常见属性

  • flex-direction:设置主轴的方向，默认是row，元素是跟着主轴排列的，设为column，则主轴变为y轴，实现从上到下排列
  • justify-content: 设置主轴上的子元素排列方式
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上子元素的排列方式（多行），只能用于出现换行的情况
  • align-items: 设置侧轴上的子元素排列方式（单行）
  • flex-flow: 复合属性，同时设置direction和wrap

主轴是x轴方向，水平向右；侧轴是y轴方向，垂直向下

justify-content：一定要确定好主轴

  • flex-start 靠左对齐
  • flex-end 靠右对齐
  • center: 子元素居中对齐
  • space-around：平分剩余空间(每个盒子都有左右边距)
  • space-between:先两边贴边再分配剩余空间

flex-wrap:

默认不换行，当多个子盒子装不进去父盒子的时候，会强制放在一行，缩小子盒子

  • warp：允许换行

align-items:

  • center:侧轴居中（侧轴为y时垂直居中）
  • flex-start: 贴着侧轴上沿
  • flex-end :贴着侧轴下沿
  • stretch ：拉伸，必须子盒子没有高度，会拉伸到和父盒子一样高（margin不影响）

align-contents:

比items多space-around、space-between两个值，可以实现平分空间，在单行下没有效果

flex-flow:

是flex-direction和flex-wrap属性的复合属性

flex-flow: row wrap;

flex子项常见属性

  • flex:定义子项目分配剩余空间，用flex表示子项目占的份数

可用于布局两边固定盒子，中间盒子长度可随屏幕大小调整的情况（自适应） //圣杯布局

  • align-self:控制子项自己在侧轴上的排列方式

允许某个项目有与其他项目不同的排列方式，可覆盖align-items属性，默认值为auto，相当于继承align-items属性，如果没有父元素则等同于stretch

  • order：属性定义项目的排列顺序，移动的是左右排列，与z-index不同

数值小的靠前排列

rem布局

rem单位

root em相对单位，em是父元素字体大小

rem是相对于html元素的字体大小

优点：可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制

媒体查询

媒体查询是CSS3新语法

  • 可以针对不同屏幕尺寸设置不同样式
@media mediatype and|not|only (media feature){
    
}
@media screen and (min-width:500px){
    body{
        background-color:red
    }
}

mediatype:媒体类型

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕

媒体特性

width：定义

max-width:800 只有宽度小于800时，才执行下面样式

  • screen还有and必须带上
  • 必须带单位px
  • 媒体查询+rem可以实现不同设备里尺寸动态变化，给html设定font-size，然后设置字体行高（rem单位）等随宽度变化

引入资源

三星：大屏和小屏使用两个css文件，直接在link中判断设备的尺寸，然后引入不同的css文件

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)"

适配方案原理

  1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
  2. 使用媒体查询根据不同设备按比例设置html字体大小，然后页面元素使用rem作为尺寸单位，当HTML字体大小变化元素尺寸也会变化，从而达到等比缩放的适配

技术方案1

less、媒体查询、rem

一般情况以一套或者两套效果图适应大部分屏幕，基本以750px宽度为准

假设设计稿是750px，把屏幕化为15等份（标准不一定是15），每一份作为html字体大小，这里为750/15=50px，那么在320px设备时，字体大小为320/15=21.33px，比例相同，本质是实现等比例缩放

  • 页面元素的rem值=页面元素值(px)/(屏幕宽度/划分份数)

  • 屏幕宽度/划分份数就是HTML font-size的大小

技术方案2（更推荐）

flexible.js 、rem

两种方案都存在，方案2更简单

淘宝团队出品，在js里处理，不需要写不同屏幕的媒体查询，原理是将当前设备划分为10等份，我们只需要把html文字大小设置为75px，里面页面元素rem值=页面px值/75

插件：cssrem自动转换rem 在插件扩展设置里调整字体大小基准值为45

响应式布局

响应式开发原理

利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

超小屏幕（手机）<768 宽度设置为100%

小屏设备（平板） >=768~<992 宽度设置为750

中等屏幕（桌面显示器） >=992~<1200 宽度设置为970px

宽屏设备（大桌面显示器）>1200 宽度设置为1170px

需要一个父级作为布局容器，在不同屏幕下，通过媒体查询改变这个布局容器排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式

Bootstrap

基于HTML、CSS和JAVASCRIPT，使web开发更加快捷

版本3.xx放弃了IE6-7，偏向于开发响应式布局、移动设备优先的WEB项目

入门文档：https://bootstrap.css88.com/getting-started/#download

  1. 创建HTML骨架文件

在head里meta后添加

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  1. 引入bootstrap样式文件
  2. 书写内容

可以在原来的基础上更改，添加类名，要注意权重

布局容器

bootstrap使用container类定义好了响应式布局的容器大小；只需要div.container 内容写在里面即可；适合做响应式

container-fluid 类 流式布局容器；占据全部视口的容器，适合做单独的移动端页面

栅格系统

说明 https://bootstrap.css88.com/css/#grid

将页面布局划分成等宽的列

  • 不管屏幕有多宽，统一划分为12列（把container划分为12列

例如类col-lg-3表示占3列（大桌面设备）

  • 如果孩子份数相加等于12，则孩子能占满整个container；小于12则会有空白；大于12则会换行

col-md-4 表示中等屏幕下占4列

  • 可以多个类名同时，便于实现响应式

  • 每一列默认有个15pxpadding值

列嵌套

为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。

加row可以取消padding值并且和父亲一样高

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列偏移

使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

可以计算实现右对齐、居中等

列排序

通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

响应式工具

可以实现在不同屏幕下的显示(visible)或隐藏(hidden)

posted @ 2021-11-13 16:43  清梨  阅读(174)  评论(0)  编辑  收藏  举报