美文网首页响应式编程Web前端之路
教你轻松搞定响应式网站

教你轻松搞定响应式网站

作者: 牛油果大虾 | 来源:发表于2016-03-27 22:30 被阅读221次

          响应式网站,一套代码适应不同设备,具体是什么无需我多说,下面就简单说一下如何轻松搞定它。

        对于初学者首先要说明并不早把它想的太难,基本可以简单理解为在html文件中多引入几个css文件,给每个css文件定义适应不同宽度,目前市面上网站多为3.4套css。

    1.写好网页框架html,建立pc端css文件,将pc端样式布局好。                                        2.创建诸如适应pad,手机的不同屏幕尺寸的css文件,将已经写好的pc端样式复制到其中,在html中head部分用link引入css样式,用媒体查询设定适应的屏幕尺寸例如"@media screen and(max-width:640px)"意思是适应最大640px屏幕。                  3.对复制过来的css代码进行修改(因为响应式在不同设备上样式不会有太大变化,所以做好一套样式后根据需求对百分比、固定尺寸、基本布局等元素进行适当修改即可),一个响应时网站基本完成,剩下一些细节根据要求完善即可。

        以上内容为个人对响应式的理解,如对您有帮助深感荣幸。

    相关文章

      网友评论

        本文标题:教你轻松搞定响应式网站

        本文链接:https://www.haomeiwen.com/subject/efrjlttx.html