• 移动Web开发小结


    以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家,同时也方便自己查看:

    1,在移动开发页面中,主体盒子的max-width与min-width的设置原因:

      ①设置max-width是为了不让盒子无限放大,以至内容显示不清,界面不友好

      ②设置min-width设置最小限制,以便于更好的布局

    2,position:fixed;  这个属性是以window最外层容器计算

    3,去除图片默认下边距的几种方法:

      ①在图片父容器中设置 font-size: 0;

      ②给图片设置 display: block;

      ③给图片设置 vertical-align: middle;

    4,使块级元素在移动端水平居中的方法:

      100px; left: 50%; margin-left: -50px;

      解释:设置一块级级元素宽度后,设置left:50%;此时此块级元素的位置是以最左边位置来计算居中;

      再设置margin-left: -50px; 让块级元素的左边距设置为-50px;即让块级元素左移宽度的一半的位置

      这样就实现了居中的效果

    5,移动端box-shadow的使用说明:

      在Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,需要将属性的名称写成-webkit-box-shadow

      Firefox浏览器则需要写成-moz-box-shadow的形式

    6,这里还补充几种转块方式:

      ①position:absolute;  将定位设置为绝对定位可以实现转块,使用此属性时要牢记将父级容器的定位设置为相对定位(relative)

      ②float:left;  设置浮动也可以实现转块,使用此属性时要牢记有了浮动就要清除浮动,清除浮动方式详见:http://www.cnblogs.com/wccc/p/6749692.html

      ③display:block;  这是最常见的转块方式

    7,of-type用法归纳:

      ①E:first-of-type:选择E同类型的同级的 第一个元素;

      ②E:last-of-type:选择E同类型的同级的 最后一个元素;

      ③E:nth-of-type(n):选择E同类型的同级的 第n个元素;

    8,移动端form的使用:

      将<input type="search">包含在form标签内,可实现将移动端小键盘enter改变成搜索按钮的功能

      这里顺带说一下 -webkit-appearance:cone;  清除移动端默认的表单样式

    9,有关组合样式或多个复杂样式的设置要有模块化的思想,将复杂问题简单化,便于管理

    10,移动端viewport设置:<mata name="viewport" content="width=device-width,initial-scale=1.0"/>

      ①设置宽度:将宽度设置为跟设备宽度(width=device-width)

      ②设置默认的缩放比:initial-scale=1.0(缩放比为1.0)

      ③设置是否允许用户缩放:user-scalable=0/no(不允许缩放);1/yes是允许缩放

      ④maximum-scale:最大缩放比

      ⑤minimum-scale:最小缩放比

      注意:viewport非标准缩放比:将body宽度设置为设备宽度的两倍,然后将缩放比设置为0.5,是为了显示的更清晰,界面更友好

    11,移动端去除点击高亮效果:

      -webkit-tap-highlight-color:transparent;

    12,移动端盒子尺寸设置:

      box-sizing:border-box;  以边框计算宽度,不设置的话边框会溢出屏幕

      -webkit-box-sizing:border-box;  //兼容处理

    13,移动端字体设置:

      font-family:sans-serif;  设备默认字体

      在移动端设置字体后,一般都会加入上述属性,因为移动端设备的字体库可能不包含开发者所设置的字体

      因此在没有所设字体的情况下,会使用设备默认字体

      //以上就是做移动端Web开发过程中的事项,当然,项目不同,设置的东西也会有所不同。根据需要各取所需,后续会有补充,感兴趣的可以加关注!

    作者:一小白
    出处:http://www.cnblogs.com/wccc/
    本文版权归作者和博客园共有,欢迎转载,但未经本人同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

       

  • 相关阅读:
    20、插入横向文本框,输入文字后,文字周围有留白
    46、文字工具
    19、表格—单元格输入文字后,四周留白边
    50、路径选择工具
    48、钢笔工具【P】—形状
    49、路径和形状
    leetcode 235. Lowest Common Ancestor of a Binary Search Tree 二叉搜索树的最近公共祖先(简单)
    leetcode 226. Invert Binary Tree 翻转二叉树(简单)
    leetcode 208. Implement Trie (Prefix Tree) 实现 Trie (前缀树) (中等)
    leetcode 144. Binary Tree Preorder Traversal 二叉树展开为链表(中等)
  • 原文地址:https://www.cnblogs.com/wccc/p/6848766.html
Copyright © 2020-2023  润新知