网站建设资讯

NEWS

网站建设资讯

web开发中PC端移动端不同屏幕大小下响应式布局怎么弄-创新互联

小编给大家分享一下web开发中PC端移动端不同屏幕大小下响应式布局怎么弄,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联专注于企业成都全网营销、网站重做改版、城固网站定制设计、自适应品牌网站建设、H5网站设计商城网站定制开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为城固等各大城市提供网站开发制作服务。

PC端效果:web开发中PC端移动端不同屏幕大小下响应式布局怎么弄

移动端效果:

web开发中PC端移动端不同屏幕大小下响应式布局怎么弄

代码如下:



	
		
		
				
		
	
	
		

响应式布局

  • 1
  • 2
  • 3
  • 4

pc.css  样式代码:

*{margin:0;padding:0;}
ul{width:calc(100% - 20px);padding:0 10px;margin:100px auto;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid blue;width:calc(25% - 2px);height;100px;float:left;text-align:center;}

mobile.css 样式代码:

*{margin:0;padding:0;}
ul{margin:100px auto;padding:0 5px;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid red;width:calc(100% - 2px);height;100px;float:left;text-align:center;}

我设置的临界点是699px,实际项目中大家可根据项目需求来设置更为精准的不同屏幕下的css,一般考虑PC端,Pad,手机端 三种就可以了!

以上是web开发中PC端移动端不同屏幕大小下响应式布局怎么弄的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!


分享题目:web开发中PC端移动端不同屏幕大小下响应式布局怎么弄-创新互联
网站网址:http://njwzjz.com/article/ccdess.html