html与CSS的移动端布局基础知识

html与CSS的移动端布局学习

---

---

meta视口标签的标准写法

<meta name="viewport" content="width=device-width,initial-scale=1.0.maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"

物理像素与开发像素

1. pc端上的1px=1个物理像素

2. 移动端上根据手机型号不同，1px=2/3/4个物理像素

   此时便要使用到二倍图四倍图，否则图片放在移动端会模糊

background-size

属性值

1. px(只填一个，一定是width，且等比例缩放)
2. 百分比（针对父盒子来说）
3. cover（直接填满父盒子，不考虑图片是否显示完整）
4. contain（图片放大到在父盒子里能放大到的最大，一定能露出全部图片内容，可能会有空白区域）

移动端需要清除的特殊默认样式

1. 链接点击会高亮

-webkit-tap-highlight-color:transparent;

2. 都可以使用盒子模型

   box-sizing:border-box;
   //非要考虑兼容性
   -webkit-box-sizing:border-box;
   

3. bottom会有默认外观样式，要统一风格的话

   -webkit-appearance:none;
   

4. 图片，链接禁止长按弹出菜单

   img,a{
   	-webkit-touch-callout:none;
   }
   

移动端技术选择

1. 单独制作（主流）

   • 流式布局（百分比布局）

   • flex弹性布局（好用）

   • less+rem+媒体查询布局

   • 混合布局

2. 响应式页面兼容（好用但很麻烦）

   • 媒体查询
   • bootstrap

---

rem布局

rem是一个基于html字体大小的相对单位
常于媒体查询和less连用

媒体查询

1. 语法

<!-- 例： -->
	@media screen and (min-width:320px){
		html{
			font-size:20px;
		}
	} 


<!-- 语法 -->
<!-- 	@media mediatype and|not|only (media feature){
		html{
			font-size:20px;
		}
	} 

	mediatype : screen/print/all
	(media feature) : min-width/max-width... -->

媒体查询引入资源

1. 写一个css
2. 在html里引入

<link rel="stylesheet" href="index.css" media="scree and (max-width=640px)"

LESS

1. css的弊端：无法计算，没有函数，冗余度高

2. LESS使用方法：

3. 安装easy less

4. 写less文件，用.less后缀

5. 保存会自动生成.css为文件

6. 引入所需页面即可

7. less语法

   • 使用变量

     • 定义变量@name=value

     • 调用变量

       • 例：font-size=@font14

   • less嵌套

     • nav{
       	a{
       		fons-size:14px;
       	}
       }
       

     • hover和伪元素情况

       nav{
       	a{
       		&:hover{
       
       		}
       		&::before{}
       	}
       }
       
       //加个&符号指向父元素
       

   • less运算

     • 直接输入运算符运算，左右必须有空格
     • 两个运算单位不一样，以第一个单位为准
     • 只有一个有单位，以有单位的为准
     • 新版本中，除法需要加括号

8. 导出及位置设置

   • easyless插件直接设置

   • 在文件的第一行写

     // out: ./css/
     //导出到该目录的css文件夹里
     
     // out: ../css/hhh.css
     //导出到上级文件夹的css文件夹里，并保存名为hhh.css
     
     //都不要加结尾分号
     

   • 不需要导出的话,第一行写

     //out: false
     

rem布局本质

本质上就是页面元素用rem单位定义大小，
用媒体查询控制html根元素的fonsize大小，
以便实现适配不同界面大小的布局。

---

flex布局

对于父盒子的属性

1. 设置主轴方向

   flex-direction : 属性值如下

   row / row-reverse / column / column-reverse

2. 设置是否换行排

   flex-wrap: nowrap / wrap

   默认都是不换行的，如果东西太多不够排，会直接修改子盒子的大小，很蛮横！

3. 以上两点可以用符合属性写

​ flex-flow：row nowrap;

4. 设置主轴子元素排列方式

   justify-content：属性值如下

   flex-start / flex-enf / center / space-around /

   space-between / space-evenly(所有地方的间距都相等)

5. 设置侧轴子元素排列(单行时)

   align-items : 属性值如下

   flex-start / flex-end / center / stretch(默认值，没设高的话)

6. 设置侧轴子元素排列(多行时)

   align-items : 属性值如下

   flex-start / flex-end / center / stretch / space-around /

   space-between

---

对于子盒子的属性

1. 设置子盒子自己的独特排列方式

   align-self：flex-start / flex-end / center / stretch

2. 调整子盒子顺序可用

   order:1/2/3/4…

3. flex元素

   给每个盒子分配剩余空间的份数