css3网站响应式写法

只愿长相守 提交于 2019-12-04 15:55:28

css3响应式写法
因为media不支持ie9以下的浏览器 所有要加个判断
<pre>
<!-- 全部通用的 -->
<link rel="stylesheet" href="{$yuming}/css/common.css?v={$visition}">
<!--[if lte IE 8]>
<link rel="stylesheet" href="{$yuming}/css/pccommon.css?v=<?php echo time() ?>"">
<![endif]-->
<!-- pc -->
<link rel="stylesheet" href="{$yuming}/css/pccommon.css" media="(min-width:1350px)">

<!--ipad和手机公用的css-->
<link rel="stylesheet" href="{$yuming}/css/mobpadcommon.css" media="(max-width:1349px)">

<!-- ipad和笔记本 -->
<link rel="stylesheet" href="{$yuming}/css/ipadcommon.css" media="(min-width:768px) and (max-width:1349px)">
<!-- 手机/-->
<link rel="stylesheet" href="{$yuming}/css/mobilecommon.css" media="(max-width:767px)">
</pre>

PC ipad 尺寸都写死 pc中间内容1350 ipad中间内容宽度768


少用绝对定位 外围高度不要写死


手机端写 全部自适应

 

<strong>注意:如果碰到编辑器编辑生成内容需要自适应的时候 在移动端 图片要设置百分比 编辑图片的时候不能写宽度和高度哦居中就行 文字字体大小不用管</strong>

 

 

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!