【黑马程序员济南】前端与移动开发就业班笔记移动web:day01

适配解决方案

流式布局 + viewport

流式布局

流式布局就是百分比布局，通过盒子的宽度设置成百分比(100%)来根据屏幕的宽度来进行伸缩，特点：不受固定像素的限制，内容向两侧填充。

流式布局是移动web开发使用的常用布局方式

Viewport

在移动端用来承载网页的这个区域，就是我们的视觉窗口，也叫viewport（视口）, 这个区域可是设置高度宽度，可是按比例放大缩小，而且能设置是否允许用户自行缩放。

Viewport的参数

width:宽度设置的是viewport宽度，可以设置device-width特殊值

initial-scale：初始缩放比，大于0的数字

maximum-scale: 最大缩放比，大于0的数字

minimum-scale: 最小缩放比，大于0的数字

user-scalable: 是否用户缩放，yes或no（1或0）

构建一个标准的移动Web开发页面

用meta标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable = 0就构建了一个标准的移动web页面file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg

写京东项目时点击高亮效果

[CSS] 纯文本查看 复制代码

-webkit-tap-highlight-color: transparent;/*清除点击高亮效果*/

在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

所有盒子以边框开始计算

[CSS] 纯文本查看 复制代码

/*设置宽度以边框开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;

在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是什么试用css3属性 box-sizing设置所有的盒子重边框开始计算宽度。

Input清除默认的样式

[CSS] 纯文本查看 复制代码

/*在移动端怎么清除默认的样式*/
/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;

在移动设备的浏览器当中表单一般会有默认的属性  通过border：none

outline：none是无法完全清楚的，还是会有一些浏览器默认的属性，比如：

内阴影，立体感、、、向这些浏览器默认加上的样式我们怎么去除呢？

我们有一个属性  -webkit-appearance这个属性指的是设置成 none

最小宽度和最大宽度的限制

[CSS] 纯文本查看 复制代码

max-width: 640px; /* 在行业当中的移动端的设计图一般使用的是640px*/
min-width: 320px;  /*在移动设备当中现在最小的尺寸320px*/

适用：图片比较多的首页，门户，电商等。

作用  保证页面在尺寸比较大的设备当中保证页面的效果也就是清新度

         保证页面在小尺寸的设备当中有较好的布局效果。

Img的下间隙问题

[HTML] 纯文本查看 复制代码

<div>
abcdefghijklmnopqrstuvwxyz
<imgsrc="../images/nv-fy.jpg" alt=""/>
</div>

文字基线默认的baseline 是以X的下边开始的

Img是行内块级元素 它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。

图片模糊的原因以及解决方法

1：1的显示在移动设备当中图标会失真原因是什么如何解决？

在高清屏当中会用两个或多个物理像素来显示实际的1px图片内容

file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg

那么其实就是相当于把1px的图片放大显示了，所以有毛边的图片一般都会失真，也就是显示模糊。

解决方案，采用压缩图标尺寸的方式来解决。

如果是Img使用直接设置宽高的方式来压缩。

如果是背景使用的是设置background-size的方式来压缩

搜索按钮调用

[HTML] 纯文本查看 复制代码

<!--在移动端点击弹出输入法  enter键会显示搜索-->
<form action="#">
    <input type="search"placeholder="提示"/>
</form>

search定义用于输入搜索字符串的文本字段。

在移动端调用输入法的时候会弹出小键盘，键盘一般是enter键，那么在搜索框当中我们要求调用是搜索按钮，那么这样的结构才能调用出来。

结构性伪类选择器

[CSS] 纯文本查看 复制代码

.sk_product > li > p:nth-of-type(1){
    color: #d8505c;
}
.sk_product > li > p:nth-of-type(2){
    /*删除线*/
    text-decoration:line-through;
    color: #666;
}

E:first-of-type匹配同类型中的第一个元素E。

E:last-of-type匹配同类型中的最后一个元素E。

E:nth-of-type(n) 匹配同类型中的第n个元素E。

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

【黑马程序员济南】前端与移动开发就业班笔记移动web:day01

适配解决方案

流式布局 + viewport

流式布局

流式布局就是百分比布局，通过盒子的宽度设置成百分比(100%)来根据屏幕的宽度来进行伸缩，特点：不受固定像素的限制，内容向两侧填充。

流式布局是移动web开发使用的常用布局方式

Viewport

在移动端用来承载网页的这个区域，就是我们的视觉窗口，也叫viewport（视口）, 这个区域可是设置高度宽度，可是按比例放大缩小，而且能设置是否允许用户自行缩放。

Viewport的参数

width:宽度设置的是viewport宽度，可以设置device-width特殊值

initial-scale：初始缩放比，大于0的数字

maximum-scale: 最大缩放比，大于0的数字

minimum-scale: 最小缩放比，大于0的数字

user-scalable: 是否用户缩放，yes或no（1或0）

构建一个标准的移动Web开发页面

用meta标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable = 0就构建了一个标准的移动web页面file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg

写京东项目时点击高亮效果

[CSS] 纯文本查看 复制代码

-webkit-tap-highlight-color: transparent;/*清除点击高亮效果*/

在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

所有盒子以边框开始计算

[CSS] 纯文本查看 复制代码

/*设置宽度以边框开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;

在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是什么试用css3属性 box-sizing设置所有的盒子重边框开始计算宽度。

Input清除默认的样式

[CSS] 纯文本查看 复制代码

/*在移动端怎么清除默认的样式*/
/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;

在移动设备的浏览器当中表单一般会有默认的属性  通过border：none

outline：none是无法完全清楚的，还是会有一些浏览器默认的属性，比如：

内阴影，立体感、、、向这些浏览器默认加上的样式我们怎么去除呢？

我们有一个属性  -webkit-appearance这个属性指的是设置成 none

最小宽度和最大宽度的限制

[CSS] 纯文本查看 复制代码

max-width: 640px; /* 在行业当中的移动端的设计图一般使用的是640px*/
min-width: 320px;  /*在移动设备当中现在最小的尺寸320px*/

适用：图片比较多的首页，门户，电商等。

作用  保证页面在尺寸比较大的设备当中保证页面的效果也就是清新度

         保证页面在小尺寸的设备当中有较好的布局效果。

Img的下间隙问题

[HTML] 纯文本查看 复制代码

<div>
abcdefghijklmnopqrstuvwxyz
<imgsrc="../images/nv-fy.jpg" alt=""/>
</div>

文字基线默认的baseline 是以X的下边开始的

Img是行内块级元素 它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。

图片模糊的原因以及解决方法

1：1的显示在移动设备当中图标会失真原因是什么如何解决？

在高清屏当中会用两个或多个物理像素来显示实际的1px图片内容

file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg

那么其实就是相当于把1px的图片放大显示了，所以有毛边的图片一般都会失真，也就是显示模糊。

解决方案，采用压缩图标尺寸的方式来解决。

如果是Img使用直接设置宽高的方式来压缩。

如果是背景使用的是设置background-size的方式来压缩

搜索按钮调用

[HTML] 纯文本查看 复制代码

<!--在移动端点击弹出输入法  enter键会显示搜索-->
<form action="#">
    <input type="search"placeholder="提示"/>
</form>

search定义用于输入搜索字符串的文本字段。

在移动端调用输入法的时候会弹出小键盘，键盘一般是enter键，那么在搜索框当中我们要求调用是搜索按钮，那么这样的结构才能调用出来。

结构性伪类选择器

[CSS] 纯文本查看 复制代码

.sk_product > li > p:nth-of-type(1){
    color: #d8505c;
}
.sk_product > li > p:nth-of-type(2){
    /*删除线*/
    text-decoration:line-through;
    color: #666;
}

E:first-of-type匹配同类型中的第一个元素E。

E:last-of-type匹配同类型中的最后一个元素E。

E:nth-of-type(n) 匹配同类型中的第n个元素E。

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830