我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局

sshe 发布于2019-08-02 15:23 / 1732人阅读

摘要：首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的

首先在head里面需要引入移动端属性：

1.css布局方式之div + css布局；



 
  
 
 
  
    
    标题: div + css布局
    
  
  
    内容: 兼容pc端和移动端的css布局

/ css /
html,
body {
margin: 0;
}
.box {
margin: 0.4rem;
}
.box .pic_box img {
width: 3rem;
}
.box .content_box {
float: right;
margin-top: -2.7rem;
width: 6rem;
font-size: initial;
}
.box .content_box .title {
height: 0.7rem;
margin-bottom: 0.2rem;
}
.box .content_box .title img {
width: 0.7rem;
height: 0.7rem;
vertical-align: -25%;
}
.box .content_box .title .tip {
/ float: right; /
line-height: 0.7rem;
}
.content {
font-size: 0.4rem;
}
p {
margin: 0;
}

移动端效果图：

pc端效果图：

2.css布局方式之弹性布局(flex布局);




  


  
    
    标题: flex布局
  
  
    内容: 兼容pc端和移动端的css布局

/ css /
html,
body {
margin: 0;
}
.box {
display: flex;
justify-content: space-between; / 水平两边对齐 /
align-items: center; / 垂直居中 /
margin: 0.6rem;
}
.box .pic_box img {
width: 8rem;
}
.box .content_box {
margin-left: 2rem;
}
.box .content_box .title {
display: flex;
align-items: center;
padding-bottom: 0.6rem;
}
.box .content_box .title img {
width: 32px;
height: 32px;
}
.box .content_box .title p {
margin-left: 0.5rem;
}
.content p {
font-size: 0.8rem;
}
p {
margin: 0;
}

移动端效果图：

pc端效果图：

flex布局需要注意的是: 设置弹性布局flex后, 浮动float, clearfix 和vertical-align 等属性均无效!

3.css布局方式之网格布局(grid布局);

/ css /
html,
body {
margin: 0;
}
.box {
display: grid;
align-items: center; / 垂直居中 /
justify-items: right; / 右对齐 /
grid-template-columns: 8rem auto; / auto表示由浏览器自己决定长度 /
grid-gap: 20px;
margin: 0.6rem;
}
.box .pic_box img {
width: 8rem;
}
.box .content_box {
justify-items: left; / 左对齐 /
display: grid;
}
.box .content_box .title {
display: grid;
grid-template-columns: 45px auto;
}
.box .content_box .title img {
width: 32px;
height: 32px;
}
.box .content_box .title p {
line-height: 32px;
}
.content p {
font-size: 0.8rem;
}
p {
margin: 0;
}



 
  
 
 
  
    
    标题: grid布局
  
  
    内容: 兼容pc端和移动端的css布局
  
 


移动端效果图：

pc端效果图：

使用grid布局的时候需要注意：设置网格布局以后, 容器子元素的float, display: inline-block,display: table-cell, vertical-align和column- 属性均无效！

总结：如果需要兼容ie8的时候建议采用div+ css 布局方式，不过未来移动端 flex布局和grid布局是个大趋势！

专线服务云服务器布局遇到的问题来谈谈我们可以用vps来干什么 beta2的CSS兼容性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54099.html

我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局

摘要：首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的首先在head里面需要引入移动端属性： 1.css布局方式之div + css布局；标题: div + css布局内容: 兼容...

miracledan 2019-08-30 11:16 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

Kerr1Gan 2019-08-26 12:20 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

lushan 2019-08-02 11:34 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

joyvw 2019-08-30 15:54 评论0 收藏0
Mac联机调试移动端页面方法和移动端IOS遇到的兼容性问题

摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。移动端IOS遇到的兼容性问题和 Mac联机调试方法有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，...

CoreDump 2019-08-23 13:46 评论0 收藏0