今日学习
移动端基础视口二倍图及background-size移动端调试移动端技术解决方案box-sizing移动端常见布局移动端开发之流式布局京东移动端首页制作
移动端浏览器的兼容
移动端的浏览器主要是处理webkit内核的兼容移动端调试真机调试总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可
视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
布局视口----例如视觉视口---看到屏幕大小理想视口---让布局理想视口是多大布局视口多大metametaname=viewportcontent=width=device-width,initial-scale=1,user-scalable=no,maximun-sacle=1,minimum-scale=1
width=device-width-----宽度设置为设备的宽度
initial-scale=1-----初始渲染的缩放比
user-scalable=no------是否允许用户缩放yes是允许no不允许
maximun-sacle=1------最大缩放比
minimum-scale=1------最小缩放比
总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口
物理像素与物理像素比
物理像素--分辨率iphone*物理像素比--一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比不是绝对的1:1针对各个设备不同1:21:3只要比2高清屏幕在iphone中高清屏叫retina屏ios专利style
*{
margin:0;
padding:0;
}
div{
width:px;
height:px;
background-color:pink;
}
/*1.物理像素就是我们说的分辨率iPhone8的物理像素是*/
/*2.在iPhone8里面1px开发像素=2个物理像素*/
/style
/head
body
div/div
/body
二倍图
解决图片模糊的问题在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题二倍图原理演示代码：
style
/*我们需要一个50*50像素（css像素）的图片直接放到我们的iphone8里面会放大2倍*就会模糊*/
/*我们采取的是放一个*图片然后手动的把这个图片缩小为50*50（css像素）*/
/*我们准备的图片比我们实际需要的大小大2倍，这就方式就是2倍图*/
img:nth-child(2){
width:50px;
height:50px;
}
/style
/head
body
!--模糊的--
imgsrc=images/apple50.jpgalt=
!--我们采取2倍图--
imgsrc=images/apple.jpgalt=
/body
修改背景图大小--background-size
background-size:具体的像素值具体的像素值;只写一个值另一个值会等比例缩放background-size:百分比辈分比;只写一个值另一个值会等比例缩放百分比参照容器的百分比background-size:cover背景图铺满整个容器背景图过小背景图会等比例放大铺满整个容器可能部分内容不可见背景图过大背景图会等比例缩小铺满整个容器可能部分内容不可见background-size:contain;宽度或者高度铺满另一边不再进行缩放了背景图等比例缩放显示完整背景图可能出现容器的空白区域背景图过小背景图会放大背景图过大背景图会缩小多倍切图
切图神器--cutterman
移动web页面
单独的写关于移动端的页面css初始化normalize.css盒子内减模型
box-sizing:content-box;默认值--传统的盒子模型宽度=内容+padding+borderbox-sizing:border-box--c3盒子模型盒子的宽度包含内容和padding和border不需要再进行数学运算清除移动端自带样式
/*CSS3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*点击高亮我们需要清除清除设置为transparent完成透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*禁用长按页面时的弹出菜单*/
img,a{-webkit-touch-callout:none;}
选型
流式布局(百分比布局)flex布局(伸缩布局/弹性布局)rem布局响应式布局--本质：媒体查询流式布局
百分比来设置元素的宽度jd移动端
新建文件夹index.html设置我们的视口引入初始化的css文件引入自己的css文件body设置
宽度先设置%，引入初始化样式;设置最大宽度px和最小宽度px设置水平居中字体大小字体样式背景色app设置
四个盒子设置浮动设置高度设置对应的背景色盒子1--8%图片修改图片的大小盒子2--10%图片修改图片的大小设置图与文字中线对齐盒子3--57%文字垂直居中颜色盒子4---25%文字垂直居中颜色
导航设置
圣杯布局
双飞翼布局3个盒子盒子1和盒子3进行定位盒子1左对齐盒子3右对齐盒子宽度不要设置margin-leftmargin-right盒子1放背景图配合background-size调整位置盒子3放文字调整位置颜色盒子2div背景图配合background-size调整位置盒子2中竖线伪元素实现盒子2中的小搜索图因为背景图是2倍图先将精灵图缩小为原来宽度的一半ps测量精灵图的偏移距离background-position:修改精灵图的大小background-size不能设置50%，因为百分比是参考的是容器的百分比值焦点图
容器中图片width:%;处理搜索框fixed;设置宽度%min-width:max-width:图片格式jpgpnggifdpgwebpbmpsvg去除图片的4px的问题图片基线对齐几像素的问题4px
默认字体16px图片的基线对齐的时候会有4px字体12px间距3px
解决基线对齐问题：
vertical-align:middle或者top、bottom;
品牌日
设置3个div全部左浮动设置宽度为33.%3个div中的图片设置宽度为%导航
放置10个a标签左浮动宽度设置为20%新闻模块
3个盒子盒子%盒子%盒子2盒子3添加边框box-sizing:border-box图片宽度设置%