文章目录
产品形态
- 第一种:pc端和移动端共用一个域名的,比如
-
华为:https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent
-
苹果:https://www.apple.com/cn/?afid=p238%7C11DPVC7K_mtid_18707vxu38484&cid=aos-cn-kwsg-brand
-
- 第二种:pc端和移动端用两个域名的,pc端和移动分别做了两套,比如:小米、京东、淘宝,一般域名中带有m的都是移动端。
-
京东pc:https://www.jd.com/
-
京东移动: https://m.jd.com/
-
小米pc:https//www.mi.com/
-
小米移动:https://m.mi.com/
-
- 总结:什么时候共用一套,什么时候用两套?
-
当结构比较简单的时候,我们可以共用一套。当结构比较复杂我们就可以写两套。
-
pc端和移动端的区别
- 事件上的区别:pc端有鼠标,所以会有与鼠标相关的事件:比如点击、滑过等。但是移动端没有鼠标,只有与手指相关的一些事件,比如滑屏,左滑、右滑等事件
- 浏览器兼容性:pc端需要考虑各个浏览器的兼容性问题,比如:火狐、谷歌、ie等,但是移动端不需要考虑各个浏览器的兼容问题,它的内核就是webkit和谷歌一样。但是移动端需要考虑适配问题,因为各个手机屏幕不一样大,而且机型不同,有时候也会有一定的兼容问题。
设计稿的尺寸
-
640x1136的宽度(单屏的页面)?参照iphone5手机分辨率:320*2
-
750x1334的宽度(单屏的页面)?参照iphone6手机分辨率:375*2
-
414x 736的宽度(单屏的页面)?参照iphone6plus?手机分辨率:414*3
新增标签
- header 头部 nav导航 footer底部 article文章 aside侧边栏 section区分大模块 figure配图 figcaption配图说明 video视频 audio音乐
<header>头部</header>
<footer>底部</footer>
<nav>导航</nav>
<article>文章</article>
<aside>侧边栏</aside>
<figure>
<img src="" alt="配图">
<figcaption>配图说明</figcaption>
</figure>
<section>大区域,跟div一样</section>
<mian>主要内容</mian>
<!-- preload:当你打开页面的时候就开始加载资源,如果不写就是点击的时候加载 -->
<video src="212.mp4" controls autoplay loop preload></video>
兼容性
<audio controls>
<!-- 会自上而下执行,如果前面执行,后面的就不执行了 -->
<source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
<source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
<source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>
新增的表单元素
<h3>新增的h5表单元素</h3>
<!-- 数字 -->
<input type="number">
<!-- 搜索 -->
<input type="search">
<!-- 电话 -->
<input type="tel">
<!-- 颜色 -->
<input type="color">
<!-- 范围 -->
<input type="range">
<!-- 上传文件 -->
<input type="file">
<!-- 日期 -->
<input type="date">
<!-- 邮件 -->
<input type="email">
css3需要增加的私有前缀
-webkit-border-radius:50%; //谷歌
-moz-border-radius:50%; //火狐
-ms-border-radius:50% ; //ie
-o-border-radius:50%; //欧朋
border-radius:50% ; //标准写法
css3补充:
- order-radius 也有四个值,顺序也是按照顺时针,border-radius:50%; 圆角 或者那个值写成宽度的一半(前提:宽高一样)
- box-shadow:
- 第一个值:阴影水平偏移
- 第二个值:阴影垂直偏移
- 第三个值:阴影的模糊度(模糊的距离)
- 第四个值:阴影的大小
- 第五个值:颜色
- 第六个值:默认是outset inset 内阴影
注意:可以写多个阴影,但是要用逗号隔开
box-shadow: 0 0 50px 1px rgb(185, 88, 194) inset,0 0 50px 1px rgb(88, 146, 194);
渐变
- 渐变可以分为两种:
- 线性渐变(Linear Gradients)
- 径向渐变(Radial Gradients)
- 线性渐变 默认是从上到下
.box{
background:linear-gradient(red,green);
background:-webkit-linear-gradient(red,green);
}
- 从一个方向到另一个方向(left 、right 、bottom、top)
background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green);
- 对角的,两个方向可以进行组合,比如下面的就是从左上角到右下角
background:linear-gradient(left top,red,green);
background:-webkit-linear-gradient(left top,red,green);
- 还可以是角度
background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);
- 可以来自由分配颜色的占比,用百分号
background: -webkit-linear-gradient(red 50%,black 50%);
径向渐变:默认的形状是椭圆,至少得有两个颜色值。
形状:ellipse 椭圆(默认),circle(圆)
.box{
width:400px;
height:600px;
margin:0 auto;
background:radial-gradient(circle,red,green);
background:-webkit-gradient(circle,red,green);
}
小案例,晴空
body,html{
height: 100%;
overflow: hidden;
background:radial-gradient(200px at right top,red, yellow, gray);
/* 200px 是圆的半径 right top是右上角开始 red是圆心颜色 yellow是外圈颜色 gray是超出范围颜色 */
}
视口
我们不加视口的时候,模拟移动端,body的宽度默认是980px,并不是手机屏幕的宽度,如果想要把咱们的页面在手机屏幕中显示完全,就会进行缩放,这样的话,里面的文字等就会看不清楚,为了避免这种情况,通常咱们会加视口,让页面的宽度等于手机屏幕的宽度。
在写移动端的时候一定要加上下面的代码,快捷键:meta:vp + tab
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
媒体查询
@media 针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。
@media not|only mediatype and (expressions) { CSS 代码...; }
- 媒体类型
/* min大于等于 max小于等于 */
@media screen and (max-width:1000px) and (min-width:900px){
div{
width:200px;
background-color: blueviolet;
}
/* }
@media screen and (max-width:500px){
div{
width:100px;
background-color: brown;
} */
写移动端时需要注意,如果版心写死的话,当宽度小于版心时下方会出现滚动条,解决方法为,在小于版心宽度时,将版心宽度设为100%
@media all and (max-width:1080px) {
.md{
width:100%;
}
/* 去除版心造成的下方滚动条效果 */
}
h1设置字体大小后,上下会有一点空隙,解决方法
h1{
line-height:1;
}