移动端基础学习笔记

最新推荐文章于 2022-12-23 23:53:51 发布

未暖猫厮

最新推荐文章于 2022-12-23 23:53:51 发布

阅读量171

点赞数

文章标签： css3 前端

本文链接：https://blog.csdn.net/qq_44279495/article/details/107853623

版权

移动端基础、flex布局

第一天基础

移动端公共样式Normalize，github地址:Normalize.css
常用公共样式如：

body {
    width: 15rem;
    margin: 0 auto;
    // 因为浏览器默认行高太小了，从排版角度考虑1.5倍行高更舒服
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
    /* 永远不会出现水平滚动条的属性 */
    overflow-x: hidden;
        /* 2.点击高亮需要清除， 设置transparent 完成透明 */
    -webkit-tap-highlight-color: transparent;
}
/* 3.移动端游览器默认外观在ios加上该属性才能给按钮和输入框自定义样式,安卓的也通用 */
input {
    -webkit-appearance: none;
}
/* 4.禁用长按页面时的弹出菜单,真实环境中有效 */
a,
img {
    -webkit-touch-callout: none;
}
/* 转为C3盒模型 */
div {
    box-sizing: border-box;
}
img {
    /* 去出图片空白间隙 */
    vertical-align: middle;
}
a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}

笔记->

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, inital-scale=1.0, maximum-scale=1.0, minimun-scale=1.0">
    <title>Flex伸缩布局-第一天</title>
    <!-- 
        一.meta视口标签
                                         设备宽度          用户是否可以缩放/yes      初始缩放比            最大缩放比         最小缩放比
        <meta name="viewport" content="width=device-width, user-scalable=no, inital-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    一.标准viewport(视口)设置
        1.视口宽度与设备保持一致
        2.视口的默认缩放比例1.0
        3.不允许用户自行缩放
        4.最大允许的缩放比例1.0
        5.最小允许的缩放比例1.0
    二.二倍图
    注：注意物理像素比 一个元素会占移动端的大小基于物理像素比
    注：图片在移动端会有 1.0 2.0 3.0倍数的缩放比 在移动端一张图片放大时会模糊
        1.物理像素(分辨率)：如667*688 移动端的1px不等于一个物理像素 物理像素点时真实存在的如：667*668 1px能显示物理像素点的个数称为物理像素比或屏幕像素比 
        2.两倍图：因一般手机端会放大两倍 所以要比实际需要的图大两倍放入 如：原先大小50*50，放入图片大小为100*100  手动调节width: 50px; heigth:50px;
        3.背景缩放：backgound-size: width height(length-百分比基于父元素)/cover(完全覆盖)/contian(

最低0.47元/天解锁文章

未暖猫厮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端基础学习笔记

移动端基础、flex布局第一天基础移动端公共样式Normalize，github地址:Normalize.css常用公共样式如：body { width: 15rem; margin: 0 auto; // 因为浏览器默认行高太小了，从排版角度考虑1.5倍行高更舒服 line-height: 1.5; font-family: Arial, Helvetica; background: #f2f2f2; /* 永远不会出现水平滚动条的属性 *
复制链接

扫一扫