{"id":17798,"date":"2024-03-15T15:43:37","date_gmt":"2024-03-15T15:43:37","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/"},"modified":"2024-03-21T11:46:14","modified_gmt":"2024-03-21T11:46:14","slug":"how-to-implement-a-responsive-layout-using-layui","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/","title":{"rendered":"How to implement a responsive layout using layui?"},"content":{"rendered":"

The responsive layout in Layui can be achieved by using Layui’s grid system and responsive classes. Below is a simple example code:<\/p>\n

<!DOCTYPE html<\/span>><\/span>\r\n<html<\/span>><\/span>\r\n<head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>Layui\u81ea\u9002\u5e94\u5e03\u5c40\u793a\u4f8b<\/title<\/span>><\/span>\r\n    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/css\/layui.css\"<\/span>><\/span>\r\n<\/head<\/span>><\/span>\r\n<body<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"layui-container\"<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"layui-row\"<\/span>><\/span>\r\n            <div<\/span> class<\/span>=\"layui-col-xs12 layui-col-sm6 layui-col-md4\"<\/span>><\/span>\u81ea\u9002\u5e94\u5e03\u5c40<\/div<\/span>><\/span>\r\n            <div<\/span> class<\/span>=\"layui-col-xs12 layui-col-sm6 layui-col-md8\"<\/span>><\/span>\u81ea\u9002\u5e94\u5e03\u5c40<\/div<\/span>><\/span>\r\n        <\/div<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/layui.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n    <script<\/span>><\/span>\r\n        \/\/ \u521d\u59cb\u5316layui<\/span>\r\n        layui.use<\/span>(['element'<\/span>], function<\/span> (<\/span>) {\r\n            var<\/span> element = layui.element<\/span>;\r\n        });\r\n    <\/span><\/script<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
In the example above, we utilized Layui’s grid system to achieve responsive layout. We defined rows and columns using the layui-row and layui-col-* classes, and set column widths for different screen sizes with layui-col-xs12, layui-col-sm6, layui-col-md4, and layui-col-xs12, layui-col-sm6, layui-col-md8.<\/p>\n
It is important to note that the examples above have used the Layui library and style files provided by CDN. If you have already included Layui in your project, you can modify the import path according to your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
The responsive layout in Layui can be achieved by using Layui’s grid system and responsive classes. Below is a simple example code: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Layui\u81ea\u9002\u5e94\u5e03\u5c40\u793a\u4f8b<\/title> <link rel=”stylesheet” href=”https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/css\/layui.css”> <\/head> <body> <div class=”layui-container”> <div class=”layui-row”> <div class=”layui-col-xs12 layui-col-sm6 layui-col-md4″>\u81ea\u9002\u5e94\u5e03\u5c40<\/div> <div class=”layui-col-xs12 layui-col-sm6 layui-col-md8″>\u81ea\u9002\u5e94\u5e03\u5c40<\/div> <\/div> <\/div> <script src=”https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/layui.js”><\/script> <script> \/\/ \u521d\u59cb\u5316layui layui.use([‘element’], function […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17798","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to implement a responsive layout using layui? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to implement a responsive layout using layui?\" \/>\n<meta property=\"og:description\" content=\"The responsive layout in Layui can be achieved by using Layui’s grid system and responsive classes. Below is a simple example code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui\u81ea\u9002\u5e94\u5e03\u5c40\u793a\u4f8b<\/title> <link rel="stylesheet" href="https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/css\/layui.css"> <\/head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">\u81ea\u9002\u5e94\u5e03\u5c40<\/div> <div class="layui-col-xs12 layui-col-sm6 layui-col-md8">\u81ea\u9002\u5e94\u5e03\u5c40<\/div> <\/div> <\/div> <script src="https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/layui.js"><\/script> <script> \/\/ \u521d\u59cb\u5316layui layui.use(['element'], function […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:43:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:46:14+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ava Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"How to implement a responsive layout using layui?\",\"datePublished\":\"2024-03-15T15:43:37+00:00\",\"dateModified\":\"2024-03-21T11:46:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/\"},\"wordCount\":111,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/\",\"name\":\"How to implement a responsive layout using layui? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:43:37+00:00\",\"dateModified\":\"2024-03-21T11:46:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to implement a responsive layout using layui?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to implement a responsive layout using layui? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/","og_locale":"en_US","og_type":"article","og_title":"How to implement a responsive layout using layui?","og_description":"The responsive layout in Layui can be achieved by using Layui’s grid system and responsive classes. Below is a simple example code: <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>Layui\u81ea\u9002\u5e94\u5e03\u5c40\u793a\u4f8b<\/title> <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/css\/layui.css\"> <\/head> <body> <div class=\"layui-container\"> <div class=\"layui-row\"> <div class=\"layui-col-xs12 layui-col-sm6 layui-col-md4\">\u81ea\u9002\u5e94\u5e03\u5c40<\/div> <div class=\"layui-col-xs12 layui-col-sm6 layui-col-md8\">\u81ea\u9002\u5e94\u5e03\u5c40<\/div> <\/div> <\/div> <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/layui@2.5.6\/dist\/layui.js\"><\/script> <script> \/\/ \u521d\u59cb\u5316layui layui.use(['element'], function […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:43:37+00:00","article_modified_time":"2024-03-21T11:46:14+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"How to implement a responsive layout using layui?","datePublished":"2024-03-15T15:43:37+00:00","dateModified":"2024-03-21T11:46:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/"},"wordCount":111,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/","name":"How to implement a responsive layout using layui? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:43:37+00:00","dateModified":"2024-03-21T11:46:14+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-a-responsive-layout-using-layui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to implement a responsive layout using layui?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17798"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17798\/revisions"}],"predecessor-version":[{"id":51434,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17798\/revisions\/51434"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}