html5 移动端、几种常见的布局、flex布局

  ***移动端浏览器:UC、QQ、欧朋、百度、360、谷歌、搜狗、猎豹;基本上都是webkit内核。
 
  ***手机频幕多:安卓480*800,480*854,540*960,720*1280,1080*1920
 
  ***移动端调试方法:谷歌的模拟手机调试(F12,底部第二个手机图标),本地服务器手机访问。
 
  ***视口viewport:就是浏览器显示页面内容的屏幕区域。以前视口默认的是980px为标准。
 
  ? ? ? meta视口标签通知浏览器。设备有多宽,布局的视口就有多宽。
 
  标签是如何控制网页的尺寸和缩放浏览器的说明。
 
  width=device-Width</strong>部分将页面的宽度设置为跟随设备的屏幕宽度(视设备而定)。
 
  initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。
 
  <meta name=”viewport” content=”width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0″>
 
  ***物理像素:屏幕显示的最小颗粒,是真实存在的。
 
  物理像素比:pc端1px表示一个物理像素,iphone8等1px表示两个物理像素。一般开发尺寸是分辨率的一半。
 
  retina(视网膜屏):把更多的物理像素点压缩到一块屏中。手机中一般这样处理,图片100*100,在样式中width、height变成50;然后放到视网膜屏中就不会变的模糊。
 
  背景缩放:background-size:背景宽度 ?高度;只写一个值表示等比缩放。属性值可以是像素、百分比、cover(等比缩放填充满盒子会裁剪)、contain(把图像等比扩展至最大尺寸,只要长或者宽有一个到边了就不拉伸了,所以会有留白)
 
  ***移动端的主流方案:单独制作(主流)、响应式页面兼容pc端。
 
  移动端初始化:插件normalize.css
 
  ***移动端点击会显示高亮,去除高亮的办法:-webkit-tap-hightlight-color:transparent;设置点击透明。
 
  在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式:-webkit-appearance:none;
 
  禁用长按页面时弹出菜单:{-webkit-touch-callout:none}
 
  ***移动端常见布局:流式布局(百分比布局)、flex布局、less+rem+媒体查询布局、混合布局;
 
  响应式页面兼容移动端:媒体查询、bootstarp;
 
  流式布局:百分比布局;max-width: 最大宽 ?min-width:最小宽。
 
  ***精灵图2倍缩放注意事项:先在ps中缩放再测量,在代码里也要background-size做相应的缩放。
 
  ***flex布局:
 
  pc端一般用传统布局,移动端一般用flex布局;
 
  任何一个容器都可以指定为flex布局。通过给父盒子添加flex属性来控制自子盒子的位置和排列方式。
 
  当为父盒子设定为flex布局后,子元素的float,clear,vertical-align属性将失效。
 
  display:flex;在使用之前,一定先要确定到主轴。
 
  父常见属性:flex-direction:设置主轴,默认主轴是x轴,row从左往右,row-reverse从右往左排列,column从上倒下,column-reverse从下到上。元素都是沿着主轴排列的。
 
  justify-content:设置主轴上的子元素的排列方式;flex-start从头开始,从左到右;flex-end从尾部开始;center:在主轴居中对齐;space-around平分剩余空间;space-between先两边贴边在平分剩余空间。
 
  flex-wrap:nowrap默认子元素不换行,如果装不下,会缩小子元素。wrap:装不下就换行。
 
  alignitems:在侧轴上子元素的排列方式(单行使用);stretch拉伸(不要设置高度)、center挤在一起居中、flex-start、flex-end。
 
  aligncontent:在侧轴上子元素的排列方式(多行使用,换行);stretch拉伸(不要设置高度)、center挤在一起居中、flex-start、flex-end、space-around(上下沿都有距离)、space-between(一个贴上沿,一部分贴下沿);
 
  flex-flow:是flex-direction和flex-wrap的复合写法。
 
  子常见属性:
 
  flex:定义子项目分配剩余空间,表示占多少份。flex:1;默认是0.
 
  align-self:控制子项在自己的侧轴上的排列方式。flex-end;
 
  order:定义子项的排列顺序。数值越小越靠前,默认是0;
 
  flex布局种主要针对宽度变化;
 
  rem主要是针对高度变化;
 
  *****rem适配布局
 
  em是相对于父元素的字体大小。
 
  rem是相对于html元素的字体大小。html { font-size:10px;};通过修改html中的文字大小,来控制页面中元素大小,必须写在样式最上面。
 
  媒体查询:可以针对不同的屏幕尺寸设置不同的样式。@media mediatype and|not|only (media feature){}
 
  mediatype媒体类型:all所有、print用于打印机、scree电脑平板手机。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61774.shtml

张贴在2