移动端 常见布局CSS3的细节

结合 Framework7 和ios UI系统，微信weUI，支付宝H5    我们在移动端一些css用法 细节的有了更深的了解；

 

高斯模糊的显示效果，ios8以上支持，ios8以上0.5px，backdrop-filter:  blur(10px)等新的属性被支持；

适当利用伪元素 比如menu 菜单icon； (ps：安卓uc 浏览器 伪元素transition支持的不是很好;)

 

list   arrow 箭头,简易，不依赖字体，图片；减少请求；最早从weUI中看到这样写；支付宝 H5页面 一些  arrow 也是直接这么写的

 

list箭头 还可以做成返回顶部icon 箭头

上图返回顶部 icon css 代码 ，（css  rotate 前面 GPU hack 一下，否则返回顶部箭头一点细微的 锯齿缺失， -webkit-transform:translateZ(0) rotate(-45deg);）

.goTop{ position:fixed; right:10px; bottom:40px; width:42px; height:42px; border:1px solid rgba(243,243,243,.9); background:rgba(0,0,0,.4); z-index:888; border-radius:22px; overflow:hidden; }
.goTop:before{content: " ";display: inline-block; width:1px; height:20px; position:absolute; left:50%; top:50%; margin-top:-10px; background:#fff; }
.goTop:after{    content: " ";display: inline-block;-webkit-transform:translateZ(0) rotate(-45deg);transform:translateZ(0) rotate(-45deg); 
  height:14px;width: 14px; border-width: 1px 1px 0px 0px;border-color: #fff;border-style: solid; position: absolute;left: 50%;top: 50%;margin-top: -8px;margin-left: -7px;}

 

移动端 44，指尖的触摸面积有关；很早的概念了，导航条，list 最小高度44px， 微信ui许多都是 地方都是参照 ios 系统ui设计 

导航栏  两端自适应布局  -webkit-box-pack:justify; 

常见的地方 ios 这种nav 导航栏 ，充分利用css3 属性（ -webkit-box-pack:justify; ps：目前安卓的 uc 浏览器   子元素不可以是行内元素（span a 等） 否则 这属性失效 ）

还有人遇到过 ；flex下的子元素必须为块级元素，非块级元素在android2.3机器下flex失效  但是我的安卓手机 4.x以上 uc浏览器还是必须 块状元素；

 

弹性模型盒的变化

 

 

 

旧语法 CSS弹性盒(旧) http://caibaojian.com/css3/properties/flexible-box/index.htm

新语法 CSS弹性盒(新) http://caibaojian.com/css3/properties/flex/index.htm

关于flex1 撑大的问题

 

复制代码
<style>
        *{ margin:0; padding:0;}
        ul,li{ list-style: none;}
        .wh200{ width: 300px; border:1px solid red;}
        
        .webkitbox{  display:-webkit-box;display:box;}
        .webkitbox .flex1{   -webkit-box-flex:1;  box-flex:1;}
        
        /* //1.box-orient属性作用：确定父元素里子元素的排列方式，是水平还是垂直。 */
        .webkitbox .row{box-orient:horizontal}
        
        
        .flexbox{ display:flex;}
        .flexbox .flex1{flex:1;}
        .flexbox .row{flex-direction: row}
    </style>
<!-- 定义地图显示容器 -->
<div style="width:800px;margin:0 auto ">
      <ul class="wh200 webkitbox row">
          <li  style=" width: 100px">分类1如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的</li>
          <li class="flex1" style=" width: 0; background-color:yellow;">分类2</li>
          <li class="flex1" style=" width: 0;">分类3如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目所有项目的flex-shrink属性都为1，的 end</li>
        </ul>
        
        
        <ul class="wh200 flexbox row">
            <li style=" width: 100px">分类1如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的</li>
            <li class="flex1" style="flex-shrink:0; background-color:yellow;">分类2  </li>
            <li class="flex1" style=" width: 0;">分类3如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的所有项目的flex-shrink属性都为1，end</li>
          </ul>
    
    据内容来决定。但是被内容撑开，使用word-wrap:break-word;强制换行文字和字母无效
    这时将盒子的width设置为 0 ，然后使用 flex样式，将宽度交给 flex 布局来决定，容器就不会被撑开
     width: 0;
     flex: 1
    
    
    如果内容大小确定，
    flex-grow:0;//是否自动增长空间
    flex-shrink:0;//是否自动缩小空间 (min-width:100px; 兼容uc)
    
    
    
</div>
复制代码

 

 nvue，weex 子元素宽度自动 的处理方案

 

nvue weex 中如何设置 text 宽度自适应文本宽度 ，通过给 text 父级容器设置样式{display:flex;    align-item: flex-start / center / flex-end  ；}  就可以实现宽度自适应，  注意 修改默认方向 flex-direction:row;

 

 

 

一版H5，web，小程序  子类宽度自动   =》 subclassWidthAuto

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
.flex-direction-row{flex-direction: row;}
.subclassWidthAuto
    {
     display:-webkit-box;
     -webkit-box-align:start;
       
      display: flex;
      align-items: flex-start;
       
      display:-webkit-inline-box; 
       display: inline-flex;
    /* align-self: flex-start; */
 }
    </style>
    <div class="wh600 " style="flex-direction: row;height: 80px;display:-webkit-inline-box;;">
        <div style="  background-color: #eee;">display:-webkit-inline-box; </div>
        <div style="  background-color: red;">子元素宽度自动1 </div>
      </div>
     
    <div class="wh600 " style="flex-direction: row;height: 80px;display: inline-flex;;">
        <div style="  background-color:#eee;">display: inline-flex;; </div>
        <div style="  background-color: red;">子元素宽度自动2</div>
      </div>
     
    <div class="wh600 " style="flex-direction: row;height: 80px;display:-webkit-box;-webkit-box-align:start;;">
        <div style="  background-color:#eee;">display:-webkit-box;-webkit-box-align:start;; </div>
        <div style="  background-color: red;">子元素宽度自动3</div>
      </div>
     
    <div class="wh600 " style="flex-direction: row;height: 80px;display: flex;align-items: flex-start">
        <div style="  background-color:#eee;">;display: flex;align-items: flex-start; </div>
        <div style="  background-color: red;">子元素宽度自动3</div>
      </div>
       
        <style>

　　

 

 

 整合适用常规web，兼容 nvux与weex 子类宽度自动        =》widthAuto

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .widthAuto{
         display:-webkit-inline-box;display: flex;align-items: flex-start; display: inline-flex;
     
    /* display: flex;
    align-items: flex-start;
 
     display:-webkit-inline-box;
     display: inline-flex; */
     
    } 
    </style>
 
       
    <div class="wh600 " style="flex-direction: row;height: 80px;  display:-webkit-inline-box;display: flex;align-items: flex-start; display: inline-flex; " >
        <div style="  background-color:#eee;">nvue与  weex 适用 </div>
        <div style="  background-color: red;">子元素宽度自动5</div>
    </div>

　　

 

注意渐进增强

 

 

ios原生 checkbox 样式

 <label class="label-switch">
                            <input type="checkbox">
                            <div class="checkbox"></div>
 </label>

 

复制代码
.label-switch {
    display: inline-block;
    vertical-align: middle;
    width: 52px;
    border-radius: 16px;
    box-sizing: border-box;
    height: 32px;
    position: relative;
    cursor: pointer;
    -ms-flex-item-align: center;
    -webkit-align-self: center;
    align-self: center;
}
.label-switch input[type="checkbox"] {
    display: none;
}


.label-switch .checkbox {
    width: 52px;
    border-radius: 16px;
    box-sizing: border-box;
    height: 32px;
    background: #e5e5e5;
    z-index: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    position: relative;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}

.label-switch .checkbox:before {
    content: ' ';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 48px;
    border-radius: 16px;
    box-sizing: border-box;
    height: 28px;
    background: #fff;
    z-index: 1;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.label-switch .checkbox:after {
    content: ' ';
    height: 28px;
    width: 28px;
    border-radius: 28px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
} 
 .label-switch input[type="checkbox"] {
  display: none;
}
.label-switch input[type="checkbox"]:checked + .checkbox {
  background: #4cd964;
}
.label-switch input[type="checkbox"]:checked + .checkbox:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.label-switch input[type="checkbox"]:checked + .checkbox:after {
  -webkit-transform: translateX(22px);
  transform: translateX(22px);
}
html.android .label-switch input[type="checkbox"] + .checkbox {
  -webkit-transition-duration: 0;
  transition-duration: 0;
}
html.android .label-switch input[type="checkbox"] + .checkbox:after,
html.android .label-switch input[type="checkbox"] + .checkbox:before {
  -webkit-transition-duration: 0;
  transition-duration: 0;
}
复制代码

 

 移动端调出搜索按钮

 

1. <form> 标签需要具有 action属性
2. <input> 标签需要设置 type="search"

?
1
<form action="#"> <input type="search" /> </form>

　　

 

左右布局 父类display:box布局    左边固定宽度 width：100px   并且左边子元素的垂直居中 右侧width 自动分成1份  -webkit-box-flex: 1;

display:box还有个好处，子类不需要计算外围宽度；为什么这么说，举个例子；最常见的应用场景；轮播图

以前我们总是手动计算 inner的总宽度 =outer的宽度*li的个数    还要监听resize时的导致的宽度变化

但是 display: -webkit-box;  可以自动 计算 inner的宽度；

关键css如下

?
1
2
.flexbox{display: -webkit-box; display: -moz-box;display:box; /*display: -webkit-flex; display: -ms-flexbox; display: flex; display: table\9;*/ }
.flexbox .flex1{-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: table-cell\9;}

 

注意点：

父类 元素  display: -webkit-box; 子类元素 如果 inupt 之类，设置 css宽度 100% 大部分 安卓手机uc 是无效的  input 需要设置 display：block；

安卓 uc浏览器   calc计算   ，display: -webkit-flex ，伪元素transition，等兼容性不怎么好；

扯一下  目前为止：

安卓 uc的坑深不见底，腾讯x5的坑能看见底，但你跳下去之后就发现特么爬不上来了=_=.....不过最近qq浏览器好多了。uc与微信自带浏览器 通病 就是缓存都比较难清理；

uc 有时候，dom 隐藏元素 display：none到block   页面所有 字体都  放大了   需要添加  <meta name="wap-font-scale" content="no">　　

 部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色

 

h5页面input.focus()放置事件或定时器中只聚焦光标，ios不弹出软键盘？

点击A，让B触发focus事件。
如果直接绑定A的点击事件，执行B.focus()，只聚焦，不弹出软键盘。

试过以下方式：
1、将B.focus()放至setTimeout中，只聚焦，不弹键盘；
2、监听setTimeout()延时，function中执行B.focus()，只聚焦，不弹键盘；
3、增加autofocus属性，只聚焦，不弹键盘；
4、增加B.setSelectionRange(0,9999)，只聚焦，不弹键盘；
5、增加B.select()，只聚焦，不弹键盘；

 ipad 默认设备宽度980；部分安卓第一次 获取设备宽度也是980；加个计时器延迟获取宽度 或者meta添加  shrink-to-fit=no 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">

 

https://forums.developer.apple.com/thread/13510

iOS下的 Fixed + Input 失效 解决办法

参考淘宝的就好

判断软键盘弹出

  • android上，当软键盘状态改变的时候，会触发window的resize事件，所以我们可以进入页面的时候保存一次window.innerHeight的值，当window的resize事件触发的时候，比较window.innerHeight的值与前一次保存的window.innerHeight的值大小来判断软键盘的收拢和弹出状态。

    var winHeight = window.innerHeight; if (isAndroid) { window.addEventListener('resize', function(e) { var tempHeight = window.innerHeight if (tempHeight < winHeight) { bShowRec = false; } else { bShowRec = true; } }); }

  • ios上，软键盘状态改变的时候，不会触发window的resize事件，但是当软键盘的“完成”按钮被点击的时候，会触发onblur事件。所以正常通过onfocus和onblur事件来判断就行。

虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
　　header('Location: http://yoursite.com/iphone');
　　exit();
}

3D Transforms origin bug, only on safari 

transition:visibility 失效

-webkit-transition:opacity .3s,visibility .3s;这样写 visibility 的 transition支持的不是很好，我的测试机器 三星自带浏览器（安卓4.3）的，无法促发，导致其他属性也无效；早期ios也存在 bug

 
    
+1, that's a clever solution to make this hacky "fix" only affect touch devices. – Michael Martin-Smucker Feb 26 '13 at 4:43
2  
The bug (which impact iOS ≤ 7) can be fixed by specify a zero duration for visibility transition (+ correct delay): state1=opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s; and state2=opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s; – memsOct 6 '15 at 15:18

http://stackoverflow.com/questions/7548833/ios-css-opacity-visibility-transition 

input 的 compositionstart 和 compositionend 事件  移动端 Web 开发踩坑之旅

 

关于Android设备中，上传图片 操作导致浏览器刷新的问题

http://blog.shaochuancs.com/android-upload-page-refresh/

在最近的开发过程中，碰到一个比较疑难的bug：当在Android设备的浏览器中打开某张网页时，无论是使用系统自带的浏览器打开，还是用微信扫描二维码打开，网页中的图片上传功能经常会出问题。问题的具体描述为：

  • 在上传组件中(哪怕是最简单的<input type="file">)，当选择好本地图片或者调取系统摄像头拍好照片后，网页被刷新。这一问题无法100%重现，但概率不低，在如红米等低端安卓机上发生的概率会比较高。
  • 与用系统自带的浏览器打开的情况相比，在微信中打开的情况下该问题出现的更为频繁。
  • 与选择本地图片上传相比，调取系统摄像头拍照上传的情况下该问题出现的更为频繁。

安卓自带浏览器 自定义事件 ele.addeventlistener('tap',function(){ window.open()})      无效

 css3  ios   -webkit-backdrop-filter: brightness(1.1) blur(10px); border-radius:6px;  overflow失效

其他的相关文章

移动端 Retina屏 各大主流网站1px的解决方案

 99移动端知识集合 https://github.com/jtyjty99999/mobileTech?utm_source=caibaojian.com

博客园 白树  移动web资源整理  http://www.cnblogs.com/PeunZhang/p/3407453.html

移动端兼容问题 比较早的 http://www.cnblogs.com/surfaces/p/4502871.html

移动端资源集锦   http://caibaojian.com/mobile-tech.html

https://github.com/baijunjie/noclickdelay.js/blob/master/noclickdelay.js

 Mobile开发经验沉淀  https://github.com/imweb/mobile/issues/2

附上代码：

　其他杂项 忽略

　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
     
           .clearfix{*zoom:1;}
           .clearfix:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
        
            .fl{float:left; display:inline;}
            .fr{float:right; display:inline;}
 
            .list3{ min-height: 44px;; margin: 10px; height: auto; overflow: hidden; border: 2px solid red;;}
            .list3 .left3{ overflow: hidden;width: 300px;    max-height: 215px; margin-right: 10px;}
            .list3 .right3{ background: #eee;}
        </style>
         
         
         
        <article class="list3 clearfix">
            <div class="left3 fl" href="http://www.itvfans.com/jianjie/32775.html" title=士(Madam Secretary)" class="fancyimg home-blog-entry-thumb">
                     
                        <img class="box-hide box-show" src="http://img.itvfans.com/wp-content/uploads/32775.jpg?imageView2/1/w/300/h/450/q/100" data-original="http://img.itvfans.com/wp-content/uploads/32775.jpg?imageView2/1/w/300/h/450/q/100" alt="士(Madam Secretary)" style="display: block;">
         
          </div>
                <div class="right3 clearfix">
                    右边
                </div>
            </article>

　

　　

　

　

posted @   surfaces  阅读(3773)  评论(4)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示
AI IDE Trae