<!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>