移动端知识点

<!DOCTYPE html>
<html lang="en">
<!--还有添加的知识点 本来我们的分辨率是可以对上物理像素的1:1 因为**屏幕技术的出现啊(忘记了)它让像素点在屏幕上压缩使得原本的区域像素点得到了翻倍
n*n 各个手机不一样造成了我们的n倍显示1px我们现在是如比我们的开发像素使365px 手机上要显示的是365*2(宽高都是) 我们设置1px在开发环境上 到了苹果手机上他是要2px显示
如果是图形就会失真可以用100px的图片先把他用backgroung-size:先设置成50px 他会在手机上自动扩大显示100px图片就正常了-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- viewport视口 有布局视口:就是你网页的布局整体大小 可视窗口你手机浏览器可以让你看到的部分
         理想视口 你的布局视口与可视视口同大小不用缩放-->
    <!--width=device-width宽度是你设备的宽度,initial-scale=1.0初始化缩放是正常1.0 
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no 最大缩放,最小缩放,允许用户缩放=no
    -->
    <title>移动端基础知识</title>
    <!--今天就这么多,主要有点慌其实全栈困在前端总想速速跳过shit,无法平静越学越是这样看了鱼皮的java全栈果然还是不能急
    主要是以后不想困在前端确实有点慌,这个还是慢慢搞
    -->
    <style>
        div[class^=c] {
            /*属性选择器的坑(shit写了这么久才发现) div后不能加空格再写类属性不然是选择子代 原本div不会有变化*/
            width: 300px;
            height: 300px;
            background: aquamarine;
            display: inline-block;
            padding: 10px;
            border: 10px solid black;
        }

        .c2 {
            box-sizing: border-box;
        }

        .ac {
            -webkit-tap-highlight-color: transparent;
            /*背景高光透明*/
            -webkit-touch-callout: none;
            /*控制弹窗不弹出*/

        }

        .bc {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <p>css以前盒子的整体大小会因为加padding border改变 margin不算,你加多少不会印象内容但会使你盒子变大多少</p>
    <p>css3中有了新的属性box-sizing:border-box他使我们的盒子大小不会改变只会研所内容的区域</p>
    <div class="c1">

    </div>
    <div class="c2">

    </div>
    <p>以下是移动属性必须用移动布局查看(打开google的f12用手机模式)</p>
    <p>我们的手机浏览器大多是基于webkit内核开发所以有些属性要加上-webkit-</p>
    <p>transparent是透明是用在死背景上的 opacity也是透明用在动态变透明上</p>
    <a href="#">a链接在移动端上点击会有高光背景需要去掉,并且长按会弹出选择框也需要去掉</a>-------------------<a class="ac" href="#">去掉后</a>
    <p><button>原样按钮或输入框</button>-------------------------<button class="bc">去掉样式</button>
    <p>
</body>

</html>

上一篇:smali语法


下一篇:react antd使用