移动端开发基础总结

移动端学习总结 (适合于复习)

移动端基础

技术选型：

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

   • 流式布局（百分比布局）
   • flex弹性布局（强烈推荐）
   • less+rem+媒体查询布局
   • 混合布局

2. 响应式页面兼容移动端（其次）

   • 媒体查询
   • BootStrap

meta视口标签

一些特殊样式：

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除，设置为transparent透明色*/
* {
    -webkit-tap-highlight-color: transparent;
}

/*移动端浏览器IOS，加上这个属性才能给按钮和输入框自定义样式*/
input {
    -webkit-appearance: none;
}

/*禁用长按页面时的弹出菜单*/
img, a {
    -webkit-touch-callout: none;
}

less基础

Less（Leaner Style Sheets 的缩写）是一种向后兼容的 CSS 语言扩展。 这是 Less 语言和 Less.js 的官方文档，Less.js 是将 Less 样式转换为 CSS 样式的 JavaScript 工具。

因为 Less 看起来就像 CSS，所以学习起来很容易。 Less 只对 CSS 语言做了一些方便的补充，这也是它可以学得这么快的原因之一。

less安装

安装less
npm install less -g

查看安装版本
lessc -v

编译less文件
lessc style.less style.css

vscode安装easy less插件
保存就会自动编译为css文件

vscode安装插件cssrem，可以让px单位自动转换为rem单位
当让我们需要在 设置 -> 拓展设置 -> cssRem config -> 修改默认的
 根字体大小  (也就是你的设计稿尺寸/划分的份数)

less变量

@变量名：值;

命名规范：

• 必须有@ 为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

@color: rgb(0, 0, 0);
@height: 200px;
@baseFont: 50px;

div {
    background-color: hotpink;
    height: @height;
    color: @color;
}

less嵌套和计算

/*最新版的less在使用除法运算时，需要加 英文括号 或者使用 ./ */
* {padding: 0; margin: 0 auto;}
html {font-size: @baseFont}
//less嵌套
.outer {
    font-size: 16px;
    height: 6rem;
    width: (300rem / @baseFont);
    //width: 300rem ./ @baseFont;
    margin: 0 auto;
    border: 1px solid antiquewhite;
    background-color: olive;
    border-radius: 10%;
    padding: 10px;
    .inner {
        background-color: #9198e5;
        height: 1rem;
        width: 50px;
        margin: 0 auto;
        border-radius: 10%;
        text-align: center;
        a {
            color: @color;
            display: inline-block;
            text-decoration: none;
            transition: all 0.2s linear;
            //给a标签添加鼠标悬浮样式
            &:hover {
                color: #ff96ce;
                transform: scale(1.2);
            }
        }
        //给inner类添加鼠标悬浮样式
        &:hover {

        }
    }
}

布局方式

流式布局

也就是百分比布局，你想让这个元素占用父元素的多大宽度，直接设置相应的宽度百分比即可

优点：

优点很明显，可以适应屏幕宽度的变化，父盒子宽度的变化，自身的宽度也会相应的去改变，避免了留白

缺点：

因为宽度是由百分比来定义的，高度和文字大小使用px来设定的，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度﹑文字大小还是和原来一样(即，这些东西无法变得“流式”），显示非常不协调

媒体查询

语法规范：

• 用@media 开头，注意@符号
• mediatype媒体类型（screen、print）
• 关键字 and、 not、 only
• media feature 媒体特性，要有括号包裹

示例：

嵌入在